事件（高级程序编程）

事件

• 理解事件流
• 使用事件处理程序
• 不同的事件类型

JS 与 HTML 之间交互便是通过事件实现的。事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器来预定事件，以便事件发生的时候执行相应的代码。

1. 事件流

    事件流描述的是从页面中接收时间的顺序，IE的为冒泡流，而Netscape为事件捕获流。

    1.1 事件冒泡

    

    那么事件流的顺序按照冒泡为

    div -> body -> html -> Document

    需要注意的是 只有 IE9， FF， Chrome 和 Safari 会一直冒泡到 window

    1.2 事件捕获

    事件捕获则是一个相反的流程

    Document  ->html -> body -> div

    依次从上到下传递事件流。、

    1.3 DOM 事件流

    DOM2级事件 中规定事件流包括3各阶段：事件捕获，处理目标和事件冒泡。

    

    对于IE，直到IE9才支持该DOM2级事件。

2. 事件处理程序

    事件就是用户或者浏览器自身执行某种动作，响应某个事件的函数就称之为事件处理程序。

    2.1 HTML事件处理程序

    

    该操作通过指定 onclick 特性并将一些 JS 代码作为它的值来进行定义。

    

    需要注意的地方就是 HTML事件中 this 的指向问题

    如上的 input 代码 当 onclick="alert(this.value)"，没有问题会弹出 "Click Me" 的结果。

    但是一旦 onclick="showValue()"再定义 

    function showValue(){

        alert(this.value);

    }

    结果为 undefined。 因为这里的this 已经指向到 window，如果需要将函数定义在外部全局中，并且需要使用到所点击的节点DOM，那么就在HTML的JS代码中传入 this 即可，onclick="showValue(this)"，在处理函数。

    2.2 DOM 0级事件处理程序

    通过JS指定事件处理程序传统方式就是将函数赋给一个事件处理程序属性。简单又有跨浏览器优势。

    

    函数内部的 this 会指向当前元素

    

    删除事件只需要将事件属性置为 null 即可。

    2.3 DOM 2级事件处理程序

    DOM 2级事件 定义了2个方法， addEventListener 和 removeEventListener 。参数有三个， 处理的事件名，事件函数以及是否是捕获阶段的布尔值。

    

    在此的事件函数是使用匿名函数的方式传入，所以就不能在使用 removeEventListener 来解除绑定了，因为就算传入了一样的匿名函数，也是指向不同的函数，所以希望使用 remove 的，必须在add事件的时候使用变量引用传入。

    还有就是对于一个元素的一个属性上可以绑定多个事件，并且是按照绑定的顺序执行的。addEventListener添加的事件只能使用 removeEventListener 来解绑，不能使用 0级事件处理程序的方式来解除事件绑定。

    （IE9， FF，Safari， Chrome， Opera 支持 DOM2级）

    2.4 IE事件处理程序

    IE实现的与DOM中类似的两个方法 attachEvent 和 detachEvent 接受两个参数 事件处理程序名称 和 事件处理程序函数。 其第一个参数为 on 开头，如 onclick，onsubmit等。

    

    在IE中使用attachEvent与使用DOM0级方法最大的区别是事件处理程序的作用域。DOM0级中事件处理程序会在所属元素的作用域内运行，但是在 attachEvent 方法下，事件处理程序会在全局作用于下运行，this会指向于window。

    

    在对于编写跨浏览器的代码时，记住这点很重要。

    还有一个与标准的DOM2级不同的是，在一个元素添加多个事件处理程序的时候，addEventListener是按照绑定的顺序先绑定的先执行原则触发事件处理程序的，但是 attachEvent 是先执行最近绑定的事件的，即执行顺序上与 addEventListener 相反。

    

    在点击后，先弹出 “Helloworld！”，而后 “Clicked”。

    2.5 跨浏览器的事件处理程序

    

    这边只是简单的提供了一个兼容方案，当然没有很细致的考虑其他的比如IE中事件处理程序的作用域问题，以及绑定多个事件的执行顺序问题。

3. 事件对象

    在触发DOM上的某个事件的时候，会产生一个事件对象event，该对象中包含了所有与事件有关的信息。例如鼠标点击时刻鼠标的位置，键盘按下有关于键的信息等。

        

    3.1 DOM中的事件对象

    兼容DOM的浏览器不管使用 DOM0级还是DOM2级都会将 event 事件对象传入。

    

    event 对象包含与创建他的特定时间有关的属性和方法，触发的事件类型不一样可用的属性和方法也不一样，不过所有的又会有以下属性：

    

    

    

    在事件处理程序内部，this 始终指向 currentTarget的值， 对于 target 只包含事件的实际目标，当直接将事件处理程序指定给目标元素，那么三个值就是相等的。

    

    如下，将事件处理程序绑定在 body上

    

    也可以看做提高效率的 事件委托 的雏形。

    event 事件对象中 preventDefault() 来取消默认行为，比如 a 标签的跳转行为等，stopPropagation() 方法使得事件停止在DOM中的传播，取消进一步的事件捕获或者冒泡。

    注意，只有在事件处理程序执行期间event事件对象才会存在，一旦事件结束，event对象就会销毁。

    3.2 IE中的事件对象

    之前所说的均是标准DOM下的方式， IE对于事件对象有一定的不同，但是总体上是一致的。在DOM 0级下，event对象作为window的一个属性存在

    

    event并不是直接存在于事件处理程序之中的，而需要获取到 window.event 再进行使用。在attenchEvent中，event对象就会被作为参数传入事件处理程序之中。

    IE的event同样也会包含一些属性和方法

    

    因为事件处理程序的作用域是更具指定他的方式来确定的，所有不能认为this会始终等于时间目标，使用 event.srcElement 比较保险。

    

    3.3 跨浏览器的事件对象

    虽然 DOM 与 IE 下event对象有所不同，但是基于相似性还是可以实现跨浏览器的解决方案来的。

    

4. 事件类型

    DOM3级规定了以下

    UI事件，当用户与页面上的元素交互的时候触发。

    焦点事件，当元素获得或者失去焦点的时候触发。

    鼠标事件，当用户通过鼠标在页面上执行操作的时候触发。

    滚轮事件，当用户鼠标滚轮时触发。

    文本事件，当文档中输入文本的时候触发。

    键盘事件。

    合成事件，当为IME 输入法编辑器 输入字符的时候触发。

    变动事件，当低层的DOM结构发生变化的时候触发。

    

    DOM3级事件模块在DOM2级事件模块的基础上重新定义了这些事件，也添加了新的事件，IE9在内主流浏览器均已支持DOM2级事件，IE9也支持部分DOM3事件。

    4.1 UI事件

    DOMActivate：表示元素已经被用户操作过（DOM3中已经废弃）。

    load：当页面完全加载后在window上面触发，当所有的框架都加载完毕的时候在框架集上触发，当图像加载完毕的时候在上触发，以及嵌入的