事件机制

事件触发三阶段

事件触发有三个阶段：
-1.捕获阶段 window 往事件触发处传播，遇到注册的捕获事件会触发
-2.目标阶段 传播到事件触发处时触发注册的事件
-3.冒泡阶段 从事件触发处往 window 传播，遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。
事件绑定大家都知道，有DOM0级（on+type）和DOM2级（addEventListener）,我觉得说那么多概念不好理解，直接看代码吧,为了方便我就直接使用id来获取元素。

DOM0级

<div id="box1"></div>
box1.onclick = function(){
    console.log('box1');
}

输出了box1这个我们都知道，再来看一下。

<div id="box1"></div>
box1.onclick = function(){
    console.log('box1');
}
box1.onclick = function(){
    console.log('box1 two');
}

输出了box1 two,因为DOM0级会覆盖掉之前在同一元素上面的绑定，再来看一下。DOM2级在同一级别的元素上可以进行多个绑定

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.onclick = function(){
    console.log('box1');
}
box2.onclick = function(){
    console.log('box2');
}
box3.onclick = function(){
    console.log('box3');
}

当我们点击box1时都知道输出box1，可是当我们点击box3时弹出什么呢？
box3 box2 box1

通常使用 addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。第三个参数默认值为 false，决定了注册的事件是捕获事件（ture为）还是冒泡事件。

image.png

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
box1.addEventListener('click', function(){
    console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){
    console.log('box2 捕获阶段');
},true);
box3.addEventListener('click', function(){
    console.log('box3 捕获阶段');
},true); 
box1.addEventListener('click', function(){
    console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){
    console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 冒泡阶段');
},false);
box1.onclick = function () {
    console.log('box1 51561');
}
box2.onclick = function () {
    console.log('box2');
}
box3.onclick = function () {
    console.log('box3');
}
box1.onclick = function () {
    console.log('box1');
}

image.png

box1.onclick = function () {
    console.log('box1 51561');
}
box2.onclick = function () {
    console.log('box2');
}
box3.onclick = function () {
    console.log('box3');
}
box1.onclick = function () {
    console.log('box1');
}
box1.addEventListener('click', function(){
    console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){
    console.log('box2 捕获阶段');
},true);
box1.addEventListener('click', function(){
    console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){
    console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 冒泡阶段');
},false);
box3.addEventListener('click', function(){
    console.log('box3 捕获阶段');
},true); 

image.png

一般来说，如果我们只希望事件只触发在目标上，这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

target 和 currentTarget

在了解上述的事件传递的三个阶段后，我们来梳理事件对象中容易混淆的两个属性：target 和 currentTarget 。

target 是触发事件的某个具体的对象，只会出现在事件机制的目标阶段，即“谁触发了事件，谁就是 target ”。
currentTarget 是绑定事件的对象。
事件委托的优点

1. 减少内存消耗
   试想一下，若果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件；

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>

1.可以大量节省内存占用，减少事件注册。代表中间还有未知数个 li复制代码如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；
因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件的时候再去匹配判断目标元素；
所以事件委托可以减少大量的内存消耗，节约效率。

2. 动态绑定事件
   比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件；
   在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；
   如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；
   所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的