js事件机制的理解

js事件机制

js事件的发生包括捕获和冒泡两个阶段

捕获：从最外边元素节点传递至发生事件的元素节点，即由外到内；
冒泡：从发生事件的元素节点传递至最外边元素节点，即由内到外；
js事件是先捕获阶段到冒泡阶段，即从最外层依次到发生事件的元素节点，再由发生事件的元素节点到最外面元素节点。但由于IE8及其低版本不支持捕获事件，所以现在很多事件都是在冒泡中进行事件处理的。

举个例子来说

	<div class="box1">
    	box1
    	<div class="box2">
        	box2
        	<div class="box3">box3</div>
    	</div>
	</div>

	.box1{
        width:300px;
        height:300px;
        background:#ccc;
        position:absolute;
    }
    .box2{
        width:200px;
        height:200px;
        background:skyblue;
        position:absolute;
        top:50px;
        left:50px;
    }
    .box3{
        width:100px;
        height:100px;
        background:blanchedalmond;
        position:absolute;
        top:50px;
        left:50px;
    }

	let box = document.getElementsByTagName("div");
    let box1 = box[0];
    let box2 = box[1];
    let box3 = box[2];
    box1.onclick=function(){
        console.log("box1被点击了。。。");
    };
    box2.onclick=function(){
        console.log("box2被点击了。。。");
    };
    box3.onclick=function(){
        console.log("box3被点击了。。。");
    };

浏览器展示

控制台输出结果

1. 捕获阶段

如上面的例子，在.box3被点击的时候，js 会从文档的最上层开始，由外向内寻找点击事件的起源，也就是 .box3。那么这个由外向内的过程就是 .box1 --> .box2 --> .box3，这三个 div 的 click 事件按照这个过程依次被触发。
这个触发的方向就是捕获的方向。

2. 冒泡阶段

在找到被点击的 .box3 之后，事件向上传递，过程是 .box3 --> .box2 --> .box1，此时依次触发.box3、.box2、.box1 的 click 事件，这个由内向外的触发过程就称为冒泡。