事件对象的属性和方法

e.target

返回事件触发的对象（具体元素）

e.currentTarget ==this

指向的对象是事件绑定的对象（元素不具体，执行的时候才确定）

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

    <div class="box">box</div>
    <ul>
        <li>abc1</li>
        <li>abc2</li>
        <li>abc3</li>
    </ul>
    <script>
        var div = document.querySelector('.box')
        // 1. e.target 返回的是触发事件的对象(元素)
        // 2. this 指代的是绑定事件的对象(元素)
        // 3. 区别: 
            // e.target: 点击了哪个元素,就返回那个元素
            // this: 哪个元素绑定了点击事件,就返回谁
        div.addEventListener('click', function(e){
            console.log(e.target)
            console.log(this)
        })

        var ul = document.querySelector('ul')
        ul.addEventListener('click', function(e){
            // console.log(e.target)
            console.log(this)
            // console.log(e.currentTarget)
            // console.log(e.currentTarget === this)
        })
    </script>

事件冒泡下的e.target 和 this == e.currentTarget

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

\