你真的理解 事件冒泡 和 事件捕获 吗？

1. 事件冒泡与事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

<div id="outer">
    <p id="inner">Click me!</p>
</div>复制代码

上面的代码当中一个div元素当中有一个p子元素，若是两个元素都有一个click的处理函数，那么咱们怎么才能知道哪个函数会首先被触发呢？

为了解决这个问题微软和网景提出了两种几乎彻底相反的概念。

事件冒泡

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

所以上面的例子在事件冒泡的概念下发生click事件的顺序应该是

p -> div -> body -> html -> document

事件捕获

网景提出另外一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

上面的例子在事件捕获的概念下发生click事件的顺序应该是

document -> html -> body -> div -> p

事件冒泡和事件捕获过程图：

1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；

2. addEventListener 的第三个参数

DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段，而做为开发者，咱们能够选择事件处理函数在哪个阶段被调用。

addEventListener方法用来为一个特定的元素绑定一个事件处理函数，是JavaScript中的经常使用方法。addEventListener有三个参数：

element.addEventListener(event, function, useCapture)复制代码

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 全部 HTML DOM 事件，能够查看咱们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。 当事件对象会做为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行（即在事件捕获阶段调用处理函数） false- false- 默认。事件句柄在冒泡阶段执行（即表示在事件冒泡的阶段调用事件处理函数）

3. 事件代理

在实际的开发当中，利用事件流的特性，咱们可使用一种叫作事件代理的方法。

<ul class="color_list">        
    <li>red</li>        
    <li>orange</li>        
    <li>yellow</li>        
    <li>green</li>        
    <li>blue</li>        
    <li>purple</li>    
</ul>
<div class="box"></div>复制代码

.color_list{            
    display: flex;            
    display: -webkit-flex;        
}        
.color_list li{            
    width: 100px;            
    height: 100px;            
    list-style: none;            
    text-align: center;            
    line-height: 100px;        
}
//每一个li加上对应的颜色，此处省略
.box{            
    width: 600px;            
    height: 150px;            
    background-color: #cccccc; 
    line-height: 150px;            
    text-align: center;        
}
复制代码

咱们想要在点击每一个 li 标签时，输出li当中的颜色（innerHTML） 。常规作法是遍历每一个 li ,而后在每一个 li 上绑定一个点击事件：

var color_list=document.querySelector(".color_list");            
var colors=color_list.getElementsByTagName("li");            
var box=document.querySelector(".box");            
for(var n=0;n<colors.length;n++){                
    colors[n].addEventListener("click",function(){                    
        console.log(this.innerHTML)                    
        box.innerHTML="该颜色为 "+this.innerHTML;                
    })            
}复制代码

这种作法在 li 较少的时候可使用，但若是有一万个 li ，那就会致使性能下降（少了遍历全部 li 节点的操做，性能上确定更加优化）。

这时就须要事件代理出场了，利用事件流的特性，咱们只绑定一个事件处理函数也能够完成：

function colorChange(e){                
    var e=e||window.event;//兼容性的处理         
    if(e.target.nodeName.toLowerCase()==="li"){                    
        box.innerHTML="该颜色为 "+e.target.innerHTML;                
    }                            
}            
color_list.addEventListener("click",colorChange,false)复制代码

因为事件冒泡机制，点击了 li 后会冒泡到 ul ，此时就会触发绑定在 ul 上的点击事件，再利用 target 找到事件实际发生的元素，就能够达到预期的效果。

使用事件代理的好处不只在于将多个事件处理函数减为一个，并且对于不一样的元素能够有不一样的处理方法。假如上述列表元素当中添加了其余的元素节点（如：a、span等），咱们没必要再一次循环给每个元素绑定事件，直接修改事件代理的事件处理函数便可。

（1）toLowerCase() 方法用于把字符串转换为小写。语法：stringObject.toLowerCase()

返回值：一个新的字符串，在其中 stringObject 的全部大写字符所有被转换为了小写字符。

（2）nodeName 属性指定节点的节点名称。若是节点是元素节点，则 nodeName 属性返回标签名。若是节点是属性节点，则 nodeName 属性返回属性的名称。对于其余节点类型，nodeName 属性返回不一样节点类型的不一样名称。

全部主流浏览器均支持 nodeName 属性。

冒泡仍是捕获？

对于事件代理来讲，在事件捕获或者事件冒泡阶段处理并无明显的优劣之分，可是因为事件冒泡的事件流模型被全部主流的浏览器兼容，从兼容性角度来讲仍是建议你们使用事件冒泡模型。

IE浏览器兼容

IE浏览器对addEventListener兼容性并不算太好，只有IE9以上可使用。

要兼容旧版本的IE浏览器，可使用IE的attachEvent函数

object.attachEvent(event, function)

两个参数与addEventListener类似，分别是事件和处理函数，默认是事件冒泡阶段调用处理函数，要注意的是，写事件名时候要加上"on"前缀（"onload"、"onclick"等）。

阻止事件冒泡

1. 给子级加 event.stopPropagation( )

$("#div1").mousedown(function(e){
    var e=event||window.event;
    event.stopPropagation();
});复制代码

2. 在事件处理函数中返回 false

$("#div1").mousedown(function(event){
    var e=e||window.event;
    return false;
});复制代码

可是这两种方式是有区别的。return false 不只阻止了事件往上冒泡，并且阻止了事件自己(默认事件)。event.stopPropagation()则只阻止事件往上冒泡，不阻止事件自己。

3.  event.target==event.currentTarget，让触发事件的元素等于绑定事件的元素，也能够阻止事件冒泡；

阻止默认事件

（1）event.preventDefault( )

（2）return false

感谢您的阅读，有不足之处请为我指出！