乐趣区

关于javascript:事件

jiezi

事件

用于解决用在网页中的行为

语法：

 标签.on 事件类型 = 一段函数代码 / 函数名

一、事件类型

1、鼠标类型 

click
dblclick
contextmenu
mouseover  mouseenter
mouseout   mouseleave
mousedown   
mouseup
mousemove
mousewheel

2、键盘类 

keydown keyup keypress

3、表单类 

focus
blur
change
input
submit

submit 的事件源是 form 标签，点击提交按钮的时候会触发

4、window 窗口类 

load
scroll
resize

二、事件流

概念：事件从开始触发到执行完结的整个过程

3 个阶段：

  • 捕捉阶段：从 window 向内找指标元素的过程
  • 指标阶段：找到指标元素后，执行的他的事件函数
  • 冒泡阶段：从指标元素向外到 window 来到的过程

留神：父标签的事件会在子标签事件的冒泡阶段执行

三、事件侦听器

概念：另外一种事件绑定形式

语法：

 标签.addEventListener(事件类型, 事件函数, 是否在捕捉阶段执行)

长处：

  1. 能够让以后事件在子标签事件的捕捉阶段执行
  2. 能够让标签绑定多个同类型的事件，并一起登程

事件解绑：

什么叫解绑？将事件删除掉

为什么解绑？因为事件绑定后会始终保留在内存中，节约了内存空间

如何解绑？

on 事件类型绑定的事件，解绑形式：标签.on 类型 = null

事件侦听器绑定的事件，解绑形式：标签.removeEventListener(事件类型, 绑定的事件函数)

留神：当事件侦听器绑定的函数是匿名函数就无奈解绑了

四、事件对象

概念：事件函数中零碎内置了一个用于记录事件所有信息的对象

获取事件对象：

 标签.on 类型 = function(e) {e 就是事件对象}

标签.on 类型 = function() {window.event 是事件对象}

作用：

  • 获取鼠标按键码 – 事件对象.button

    0 示意左键；1 示意滚轮；2 示意右键

  • 获取事件类型 – 事件对象.type

  • 获取键盘按键码 – 事件对象.keyCode

    回车键：13

    空格键：32

    上下左右：38 40 37 39

    组合键：返回布尔值，示意这几个键是否跟其余键组合应用了

    ​ 事件对象.shiftKey

    ​ 事件对象.altKey

    ​ 事件对象.ctrlKey

  • 获取鼠标地位

    • 绝对事件源的地位 

       事件对象.offsetX
事件对象.offsetY

  • 绝对以后浏览器可视窗口 

     事件对象.clientX
事件对象.clientY

  • 绝对于整个网页文档 

     事件对象.pageX
事件对象.pageY

  • 获取精准的事件指标元素 

     事件对象.target

  • 阻止事件冒泡 

     事件对象.stopPropagation()
事件对象.cancelBubble = true

  • 阻止默认行为 

     事件对象.preventDefault()
事件对象.returnValue = false

四、事件委托

概念：将子标签事件委托父标签解决

原理：利用事件冒泡

要害代码：获取精准的指标元素，进行判断

益处：

  1. 缩小回流，缩小绑定次数
  2. 动静增加的子标签也能有事件
退出移动版