WebAPI编程（2）——事件高级

事件高级

1、注册事件

1.传统注册方式

• 利用on开头的事件onclick
• 特点：注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

2.方法监听注册方式

• eventTarget.addEventListener( ‘type’，listener[，useCapture])：将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

  – tyle：事件类型字符串，比如click、mouseover，不带on

  – listener：事件处理函数，事件发生时，会调用该监听函数

  – useCapture：可选参数，是一个布尔值，默认为false

• IE9之前的IE不支持此方法，可使用att achEvevt()代替
• 特点：同一个元素同一个事件可以注册多个监听器，按照注册顺序依次执行

2、删除事件

1. 传统方式删除事件

   eventTarget.onclick = null;

2. 方法监听注册方式删除事件

   – eventTarget.removeEventListener( type，listenser[，useCapture]);

   – eventTarget.detachEvent( eventNameWithOn，callback);

3、DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

1. 捕获阶段：由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
2. 当前目标阶段
3. 冒泡阶段：事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程

注意：

1. JS代码中只能执行捕获或者冒泡其中的一个阶段；
2. onclick 和 attachEvent 只能得到冒泡阶段；

3. addEventListener( type，listener，[useCapture])

   第三个参数如果是 true ，表示在事件捕获阶段调用事件处理程序；

   如果是 false，表示在事件冒泡阶段调用事件处理程序；

4. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

4、事件对象

1. 什么是事件对象

   eventTarget.onclick = function(event) {}

   eventTarget.addEventListener(‘click’，function(event) {} )

   这里的 event 就是事件对象

官方解释：事件对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，由很多属性和方法。

1. 事件对象的使用语法

   eventTarget.onclick = function(event) {}

   eventTarget.addEventListener(‘click’，function(event) {} )

   event 是形参，系统自动设定为事件对象，不需要传递实参

2. 事件对象的常见属性和方法

• e.target——返回触发事件的对象
• e.srcElement——返回触发事件的对象，ie6-8使用
• e.type——返回事件的类型
• e.cancelBubble——该属性阻止冒泡，ie6-8使用
• e.returnValue——阻止默认事件，ie6-8使用
• e.preventDefault()——阻止默认事件
• e.stopPropagation()——阻止冒泡

5、事件委托（代理、委派）

• 事件委托也称为事件代理
• 原理：不是为每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
• 作用：只操作了一次DOM，提高了程序的性能。

6、常用的鼠标事件

• onclick——鼠标点击左键触发
• onmouseover——鼠标经过触发
• onmouseout——鼠标离开触发
• onfocus——获得鼠标焦点触发
• onblur——失去鼠标焦点触发
• onmousemove——鼠标移动触发
• onmouseup——鼠标弹起触发
• onmousedown——鼠标按下触发
• contextmenu——禁用右键菜单
• selectstart——禁止选中文字

鼠标事件对象：

• e.clientX——返回鼠标相对于浏览器窗口可视化的X坐标
• e.clientY——返回鼠标相对于浏览器窗口可视化的Y坐标
• e.pageX——返回鼠标相对于文档页面的X坐标
• e.pageY——返回鼠标相对于文档页面的Y坐标
• e.screenX——返回鼠标相对于电脑屏幕的X坐标
• e.screenY——返回鼠标相对于电脑屏幕的Y坐标

7、常用的键盘事件

1. 常用键盘事件

   onkeyup——键盘按键被松开时触发

   onkeydown——键盘按键被按下时触发

   onkeypress——键盘按键被按下时触发

2. 键盘事件对象

   keyCode——返回该键的ASCII 值，能区分大小写

注意：

1. 如果使用 addEventListener 不需要加 on
2. onkeypress 不识别功能键，比如左右箭头，shift等
3. onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
4. 三个事件的执行顺序是：keydown–>keypress–>keyup