DOM 事件-一一网

前言

本文主要介绍：

DOM 事件级别
DOM 事件模型
DOM 事件委托

1 DOM事件级别

DOM 级别可以分为四个级别：DOM 0级、DOM 1级、DOM 2级和 DOM 3级。

而 DOM 事件分为三个级别：DOM 0级事件处理、DOM 2级事件处理和 DOM 3级事件处理。

由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。

1.1 DOM 0级事件

在了解 DOM 0级事件之前，我们有必要先了解下 HTML 事件处理程序，也是最早的这一种的事件处理方式，代码如下：

<button type="button" onclick="showFn()"></button>

<script>
    function showFn() {
        alert('Hello World');
    }
</script>
复制代码

以上代码通过直接在 HTML 代码里定义了一个 onclick 的属性触发 showFn 方法，这样的事件处理程序最大的缺点就是 HTML 与 JS 强耦合，一旦需要修改函数名就得修改两个地方。当然其优点是不需要操作 DOM 来完成事件的绑定。

而 DOM 0级事件就是将一个函数赋值给一个事件处理属性，比如：

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    btn.onclick = function() {
        alert('Hello World');
    }
    // btn.onclick = null; 解绑事件 
</script>
复制代码

以上代码给 button 定义了一个 id，通过 JS 获取到了这个 id 的按钮，并将一个函数赋值给了一个事件处理属性onclick，这样的方法便是 DOM 0级处理事件。另外可以通过给事件处理属性赋值null来解绑事件。

小结

el.onclick=function(){}

DOM 0级事件处理程序的事件在冒泡阶段执行。

DOM 0级事件处理程序的缺点在于无法为同一个元素绑定多个同类型事件。

1.2 DOM 2级事件

DOM 2级事件在 DOM 0级事件的基础上弥补了一个处理程序无法同时绑定多个处理函数的缺点，允许给一个处理程序添加多个处理函数。代码如下：

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    function showFn() {
        alert('Hello World');
    }
    
    btn.addEventListener('click', showFn, false);
    // btn.removeEventListener('click', showFn, false); 解绑事件 
</script>
复制代码

DOM 2级事件定义了addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件。均有三个相同的参数，具体如下：

el.addEventListener(eventName, callback, useCapture)

eventName: 事件名称（名字不带 on）
callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event
useCapture: 默认缺省或 false，代表事件在冒泡阶段执行

需要注意的是IE8以下版本不支持 addEventlistener 和 removeEventListerner
，需要使用attachEvent和detachEvent实现：

btn.attachEvent('onclick', showFn); // 绑定事件 
btn.detachEvent('onclick', showFn); // 解绑事件
复制代码

小结

el.addEventListener(eventName, callback, useCapture)

DOM 2级事件处理程序能够为同一元素绑定多个同类型事件

1.3 DOM 3级事件

在 DOM 2级事件的基础上添加了更多的事件类型。

UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM 3级事件也允许开发者自定义事件。

2 DOM事件模型

浏览器在发展的过程中出现了两种不同的规范

IE浏览器使用的是事件冒泡，在目标节点从小至大传播。
网景浏览器使用的是事件捕获，在目标节点从大至小传播。
为了规范开发标准，W3C 制定的 Web 标准中，同时采用了两种方案，事件捕获和事件冒泡都可以，但默认使用事件冒泡。

DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：

捕获阶段：事件从 window 对象自上而下向目标节点传播的阶段；
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自下而上向 window 对象传播的阶段。

3 事件委托（事件代理）

原理：由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。

把一个元素响应事件的函数委托给该元素的外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素执行函数。

优点：

减少内存消耗

假设有一个列表，列表之中有大量的列表项，我们需要在点击每个列表项的时候响应一个事件

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
复制代码

如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。借助事件代理，我们只需要给父容器ul绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。