目录

    1. 事件处理模型:冒泡和捕获型

    <div id="outer">
        <p id="inner">Click!</p>
    </div>
    

    上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢?

    为了解决这个问题微软和网景提出了两种几乎完全相反的概念。 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

    事件冒泡的事件流模型被所有主流的浏览器兼容,从兼容性角度来说还是建议使用事件冒泡模型

    1.1 捕获型事件流

    网景提出了一种名为事件捕获(event capturing)的事件流。事件从最外层开始发生,直到最具体的元素。

    上面例子,在事件捕获的概念下发生click事件的顺序是document -> html -> body -> div -> p

    1.2 冒泡型事件流

    微软提出了一种名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

    上面例子,在事件冒泡的概念下发生click事件的顺序是p -> div -> body -> html -> document

    1.3 W3C事件处理模型

    任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。

    上面例子,在事件捕获的概念下发生click事件的顺序是document -> html -> body -> div -> p -> div -> body -> html -> document

    2. DOM事件绑定

    JavaScript中一共有三种事件监听方法:

    1.DOM0级事件处理方式

    绑定形式:element[’on’ + type] = function(){} or null(删除处理程序)

    将一个函数赋值给一个事件处理属性,特点:简单且全部浏览器支持,但是会覆盖绑定。

    2.DOM2级事件处理方式

    添加事件处理程序和删除事件处理程序的方法:addEventListener,removeEventListener。

    绑定形式:element.addEventListener(type, listener, useCapture); // IE6~8不支持

    在IE中使用,attachEvent和detachEvent来实现。 绑定形式:element.attachEvent(’on’ + type, listener); // IE6~10,IE11不支持

    3.DOM3级事件处理方式 DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件,例如,UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件。还可以使用createEvent自定义事件。

    参数含义

    • type:事件类型
    • listener:事件触发后的回调函数
    • useCapture:是否使用捕获,如果值为true, useCapture 表示用户希望发起捕获。 在发起捕获之后, 只要Dom子树下发生了该事件类型,都会先被该事件监听器捕获,然后再被派发到Dom子树中的事件监听器中。并且向上冒泡的事件不会触发那些发起捕获的事件监听器。进一步的解释可以查看 DOM Level 3 Events 文档。 useCapture 默认值为false 。
    • addEventListener是W3C工作组在DOM Level 2开始引入的一个注册事件监听器的方法;而在此之前,传统的事件监听方法是通过element[’on’ + type]的方式来注册的。它们两之间的主要区别是,element[’on’ + type]的方式无法使用事件捕获,并且element[’on’ + type]不支持对同一个元素的同一个事件注册多个事件监听器。如下面的例子所示,元素被点击后只会输出1,而不会输出0和1.

        element.onclick = function(){ console.log(0); }
        element.onclick = function(){ console.log(1); }
      

      然而addEventListener方法在IE6~8的浏览器中不被支持。那么在低版本的IE中怎么来为同一个事件注册多个事件监听器呢?原来IE从IE5.0系列开始就引入了attachEvent()方法来支持这一特性。但遗憾的是该方法也不支持事件捕获。并且从IE 11开始,这个方法已经被弃用。