Web-api学习 09：e.target 和 this 的区别

• this 是事件绑定的元素（绑定这个事件处理函数的元素） 。

• e.target 是事件触发的元素。

只有一个元素的时候

this 和 e.target都指向了函数调用（绑定）者 div

    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            // e.target 和 this指向的都是div
            console.log(e.target);
            console.log(this);

        });
    </script>

父元素绑定事件，事件冒泡下的e.target 和 this 的区别

dom事件流分为 捕获阶段 当前阶段 冒泡阶段

冒泡阶段：从当前阶段 到 document，也就是由内到外

该例子虽然是ul（只是一个盒子）绑定了点击事件，但是真正触发点击的却是li

所以e.target指向 li 而不是ul

this 是指向事件的绑定者

Web-api学习 07：DOM事件流_玉安_ZhangDe的博客-CSDN博客

    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
              // 我们给ul 绑定了事件  那么this 就指向ul  
              console.log(this); // ul

              // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
              console.log(e.target); // li
        });
    </script>