DOM事件流模型

dom兼容浏览器汇中，事件流分为三个阶段：（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；（2）目标阶段：真正的目标节点正在处理事件的阶段；（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。 DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。

<div>
    <p>点击一下！</p>
</div>

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

    <body>
        <div id="parent">
            <div id="child">
                点击一下！
            </div>
        </div>
        <script>
            const parent=document.getElementById('parent')
            const child=document.getElementById('child')
            document.body.addEventListener(
                'click',
                function(){
                    console.log('click-body')
                },
                false
            )
            parent.addEventListener(
                'click',
                function(){
                    console.log('click-parent')
                },
                false
            )
           child.addEventListener(
                'click',
                function(){
                    console.log('click-child')
                },
                false
            )
        </script>
    </body>

点击子元素之后结果

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

由于当时网景和微软的主张不同，w3c采用折中方式，制定了统一的标准——先捕获在冒泡 addEventListener有三个参数： element.addEventListener(event,function,useCapture) event:需要绑定的事件 function：触发事件后需要执行的函数 useCapture：默认值为false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

    <body>
        <div id="parent">
        父元素
            <div id="child">
                子元素
            </div>
        </div>
        <script>
            const parent=document.getElementById('parent')
            const child=document.getElementById('child')
            document.body.addEventListener(
                'click',
                function(){console.log('click-body')}，
                false
            )
            parent.addEventListener(
                'click',
                function(){console.log('click-parent--事件传播')},
                false
            )
             parent.addEventListener(
                 'click',
                 function(){console.log('click-parent--事件捕获')},
                 true
             )
            child.addEventListener(
                'click',
                function(){console.log('click-child')},
                false
            )
        </script>
    </body>

点击子元素

整个事件的流程：父元素通过事件捕获的方式注册了click事件，所以在事件捕获阶段就会触发，然后到了目标阶段，即事件源，之后进行事件传播，parent同时也用冒泡方式注册了click事件，所以这里会触发冒泡事件，最后到根节点。

事件委托（事件代理）

事件委托，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。以此减少了内存的消耗

<ul id="list">
    <li class="class-1">1</li>
    <li class="class-1">2</li>
    <li class="class-1">3</li>
    <li class="class-1">4</li>
    
    ...
    
    <li>n</li>
</ul>

此时有的很多的列表项需要一一去绑定一个函数，这个对于内存消耗是比较大的，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul上，然后在执行事件的时候再去匹配判断目标元素。

<ul id="list">
    <li class="class-1">1</li>
    <li class="class-1">2</li>
    <li class="class-1">3</li>
    <li class="class-1">4</li>
</ul>
<script>
    const list=document.getElementById('list')
    list.addEventListener('click',function(e){
        const event=e||window.event
        const target=event.target||event.srcElement
        if(target.matches('class-1')){
            console.log('the content is'+target.innerHtml)
        }
    },false)
</script>

文章转载自：DOM事件流之js事件冒泡与事件捕获

js基础之--事件捕获和事件冒泡

DOM事件流模型

事件冒泡

事件捕获

事件委托（事件代理）