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

事件高级

1、注册事件

1.传统注册方式

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

2.方法监听注册方式

eventTarget.addEventListener( ‘type’，listener[，useCapture])：将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。 – tyle：事件类型字符串，比如click、mouseover，不带on – listener：事件处理函数，事件发生时，会调用该监听函数 – useCapture：可选参数，是一个布尔值，默认为falseIE9之前的IE不支持此方法，可使用att achEvevt()代替特点：同一个元素同一个事件可以注册多个监听器，按照注册顺序依次执行

2、删除事件

传统方式删除事件 eventTarget.onclick = null;方法监听注册方式删除事件 – eventTarget.removeEventListener( type，listenser[，useCapture]); – eventTarget.detachEvent( eventNameWithOn，callback);

3、DOM事件流

事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

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

注意：

JS代码中只能执行捕获或者冒泡其中的一个阶段；onclick 和 attachEvent 只能得到冒泡阶段；addEventListener( type，listener，[useCapture]) 第三个参数如果是 true ，表示在事件捕获阶段调用事件处理程序； 如果是 false，表示在事件冒泡阶段调用事件处理程序；有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

4、事件对象

什么是事件对象 eventTarget.onclick = function(event) {} eventTarget.addEventListener(‘click’，function(event) {} ) 这里的 event 就是事件对象

官方解释：事件对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，由很多属性和方法。

事件对象的使用语法 eventTarget.onclick = function(event) {} eventTarget.addEventListener(‘click’，function(event) {} ) event 是形参，系统自动设定为事件对象，不需要传递实参

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

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、常用的键盘事件

常用键盘事件 onkeyup——键盘按键被松开时触发 onkeydown——键盘按键被按下时触发 onkeypress——键盘按键被按下时触发键盘事件对象 keyCode——返回该键的ASCII 值，能区分大小写

注意：

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