JavaScript 中 e.target 和 this 的区别

JavaScript 中 e.target 和 this 的区别：

        1、this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）；

        2、e.target 是事件触发的元素；

        3、this：哪个元素绑定了这个点击事件，就返回哪个元素；e.target：点击了哪个元素，就返回哪个元素（操作某特定元素触发的改事件，那么返回这个特定元素）。

        注意：通常情况下 terget 和 this 是一致的，但在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），this指向的是父元素，因为它是绑定事件的元素对象，而target指向的是子元素，因为他是触发事件的那个具体元素对象。

通常情况下的 e.target 和 this ：

<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 ：

<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>