浏览器事件代理机制原理？

关于浏览器事件代理

弄明白浏览器事件代理事前，先了解下事件、事件流。

一，事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。即操作对应HTML元素时，会触发相应事件（包含事件源，事件名以及对应的事件回调函数）

二，事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。
IE最开始实现实现事件流的方式：冒泡事件(event bubbling)，Netscape提出了另外一种事件流方式：事件捕获(event capturing)，不同的浏览器实现上有一些差别，用起来就有些繁琐。幸好现代浏览器都实现了W3C制定的"DOM2级事件addEventListener"，"DOM2级事件"把事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段。
①、事件捕获阶段。即由最顶层元素，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件。（由外向内依次执行事件）
②、处于目标阶段。检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件。
③、事件冒泡阶段。从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定再其上的事件。（由内向外依次执行事件）

三，事件冒泡和事件捕获

在dom2事件中，利用第三个参数控制事件是从哪个阶段开始。如果是true则是从捕获阶段开始，否则是从冒泡阶段开始。

<body>
    <div id="wrap" style="height: 300px;background: yellow;"> 
        wrap
        <div id="app" style="width: 50%; height: 260px;background: pink;">
            app
            <div id="child" style="width: 50%;height: 80px;background: green;">
                child
            </div>
        </div>
    </div>
    <script>
        var wrapNode = document.getElementById('wrap')
        var grandNode = document.getElementById('app')
        var childNode = document.getElementById('child')
       //addEventListener的第三个参数决定事件是否是捕获。true为捕获，false为冒泡
        wrapNode.addEventListener('click',function(){
            console.log('wrap捕获')
        },true)
        wrapNode.addEventListener('click',function(){
            console.log('wrap冒泡')
        },false)
        grandNode.addEventListener('click',function(){
            console.log('app冒泡')
        },false)
        childNode.addEventListener('click',function(){
            console.log('child捕获')
        },true)
    </script>
</body>

在这里插入图片描述

当点击child时，触发事件顺序如上图所示。
最外层元素的捕获事件=》内层的捕获事件=》目标元素先后注册的事件（先注册的捕获事件）=》内层的冒泡事件=》内层的dom0事件=》外层的冒泡事件 =》外层的dom0事件。
注意：1）事件触发时会先从目标元素的最外层开始触发捕获的事件，
2）对于目标元素而言，先注册的是哪个事件就会先执行哪个，与是否冒泡或者排序无关。
3）dom0事件会在冒泡事件执行阶段触发。
4）目标元素以内的事件并不会触发。

4，事件代理

1）含义：

给祖先元素绑定事件，操作后代元素时，会利用事件流的原理触发祖先元素的事件。事件代理是基于事件冒泡。

2）作用：

避免给过多的子元素添加同一事件，影响性能。
后期新添加的子元素也能触发事件。