事件冒泡和事件捕获

事件流

从页面中接受事件的顺序。

DOM2级流包含三个阶段

1. 事件捕获
2. 处于事件目标
3. 事件冒泡

1，事件冒泡：

即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

冒泡是向上的

比如点击div1

    


    
Click Me

如果你点击了页面中的

元素，那么这个 click 事件会按照如下顺序传播：

4. document

也就是说，click 事件首先在

元素上发生，而这个元素就是我们单击的元素。然后，click 事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。下图展示了事件冒泡的过程。

image

2，事件捕获：

与事件冒泡正好相反

从最不具体的节点到最具体的元素依次触发某个事件。

DOM1级事件处理程序

比如

btn.onclick=function(){
    alert(1);
}

btn.onclick=function(){
    alert(2);
}

//只会alert(2)，这是DOM 1级  后面的会覆盖前面的

删除DOM1级的事件处理程序。需要用到null

btn.onclick=null

将事件处理程序设置为 null 之后，再单击按钮将不会有任何动作发生。

DOM2级事件模型

处理指定和删除事件处理程序的操作：
addEventListener() 和 removeEventListener()

都接受三个参数

要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    console.log(this.id);
}, false);

通过DOM2，可以给某个元素添加多个相同的事件。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    console.log(this.id);
}, false);
btn.addEventListener("click", function(){
    console.log("Hello world!");
}, false);

会依次触发，打印是id和Hello world

好处：为同一个元素添加多个事件处理程序。

移出事件removeEventListener()

注意：通过 addEventListener() 添加的匿名函数将无法移除，如下面的例子所示。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    console.log(this.id);
}, false);
btn.removeEventListener("click", function(){ // 没有用！
    console.log(this.id);
}, false);

看似会删除掉事件，但是第二个参数是不一样的。fn!=fn

那如何才能移出事件呢？

方法：将第二个参数改写为有名函数

var btn = document.getElementById("myBtn");
var fn1 = function(){
    console.log(this.id);
};
btn.addEventListener("click",fn1, false);
btn.removeEventListener("click", fn1, false); // 有效！

这样三个参数就是一致的了，可以有效移出事件