浏览器事件机制

概述

浏览器事件传播存在三个阶段：捕获阶段，目标阶段，冒泡阶段

捕获阶段：从window对象派发到事件目标的父级的过程
目标阶段：目标被找到
冒泡阶段：从目标父级到window对象
在任何阶段调用 stopPropagation 都将终止本次事件的传播。
查看e.path可以查看dom链路

事件传播

代码实验

dom以及style如下

<style>
    #root{
        width: 100px;
        height: 100px;
        background: red;
    }
    #parent{
        width: 60px;
        height: 60px;
        background: yellow;
    }
    #child{
        width: 30px;
        height: 30px;
        background: blue;
    }
</style>

<div id="root">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

三层嵌套.png

如上所述，我们嵌套了三层结构，root，parent，child，下面我们给每一层绑定捕获和冒泡的点击事件

        var getDom = function(id){
            return document.getElementById(id)
        }
        var root = getDom('root')
        var parent = getDom('parent')
        var child = getDom('child')
        root.addEventListener('click', function(e){
            console.log('root---捕获阶段')
        }, true)
        parent.addEventListener('click', function(e){
            console.log('parent---捕获阶段')
        }, true)
        child.addEventListener('click', function(e){
            console.log('child---捕获阶段')
        }, true)
        root.addEventListener('click', function(e){
            console.log('root---冒泡阶段')
        }, false)
        parent.addEventListener('click', function(e){
            console.log('parent---冒泡阶段')
        }, false)
        child.addEventListener('click', function(e){
            console.log('child---冒泡阶段')
        }, false)

实验一：验证捕获阶段和冒泡阶段的执行顺序

点击红区区域（target:root层）

root事件.png

点击黄色区域（target:parent层）

parent事件.png

点击蓝色区域（target:child层）

child事件.png

实验二：在各个流程进行打断

a. 仅在root层捕获阶段停止捕获，点击root层，root层的事件经历捕获阶段，目标阶段，冒泡阶段

root.addEventListener('click', function(e){
  e.stopPropagation()
  console.log('root---捕获阶段')
}, true)

事件流程完成.png

b.仅在root层捕获阶段停止捕获，点击child层，会在root层结束捕获，并不再向下传播，整个事件流终止

root层捕获阶段停止捕获.png

c.仅在child层冒泡阶段停止冒泡，点击child层，会在child层结束冒泡，并不再向上传播，整个事件流终止

child层冒泡阶段停止冒泡.png

其他

addEventListener可以再一个dom上绑定多个元素，而on-event只能绑定一次，因为on-event只是一个属性如下代码，onclick将被覆盖

child.setAttribute('onclick', "alert('child-first')");
child.onclick = function(){
  console.log('child---click')
}
//执行child---click