浏览器事件代理机制的原理是什么？

[TieMuZhen]

在说浏览器事件代理机制原理之前，我们首先了解一下事件流的概念，早期浏览器，IE的事件流是事件冒泡流，而Netscape采用的则是事件捕获。流"DOM2级事件"把事件流分为三个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。现代浏览器也都遵循此规范。

事件代理是什么

事件代理又称为事件委托，在祖先级DOM元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件冒泡的原理来触发绑定在祖先级DOM的事件。因为事件会从目标元素一层层冒泡至document对象。

为什么要事件代理

1、添加到页面上的事件数量会影响页面的运行性能，如果添加的事件过多，会导致网页的性能下降。采用事件代理的方式，可以大大减少注册事件的个数。

2、事件代理的当时，某个子孙元素是动态增加的，不需要再次对其进行事件绑定。

3、不用担心某个注册了事件的DOM元素被移除后，可能无法回收其事件处理程序，我们只要把事件处理程序委托给更高层级的元素，就可以避免此问题。

冒泡还是捕获？

对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。

IE浏览器兼容

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

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

阻止事件冒泡

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，让触发事件的元素等于绑定事件的元素，也可以阻止事件冒泡。

btn.onclick=function(event){
    if(event.target == event.currentTarget){
        console.log("event")
    }
}

阻止默认事件

（1）event.preventDefault( )
（2）return false