e.target和e.currentTarget和this 三者

e.target 是一种事件委托，通过事件冒泡机制，给父元素添加监听事件。当子元素触发事件，由于事件冒泡到父元素，父元素触发事件，而此时的e.target指向的是引起触发事件的元素。
e.currentTarget 是绑定监听事件的对象
this即e.currentTarget

this即e.currentTarget
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
<script type="text/javascript">
    var ul = document.querySelector('ul');
    var li = document.querySelectorAll('li');
        ul.addEventListener('click',function(e){
        console.log("e.target = " + e.target.nodeName);  //li
        console.log("e.currentTarget = " + e.currentTarget.nodeName);  //ul
        console.log("this = " + this.nodeName); //ul
        })

</script>

通过监听父级元素ul,e.target指向引起触发事件的子元素li，这种方法能减少监听器的数量，减少内存。

//当li中包含着其他标签，如span，strong等,可能e.target会指向li的子元素，可以一层一层搜索，若节点的nodeName为li，则返回，反之则返回它的父节点。
    <ul>
        <li>li1<span>我是span1</span></li>
        <li>li2</li>
        <li>li3</li>
    </ul>
<script type="text/javascript">
    var ul = document.querySelector('ul');
    var li = document.querySelectorAll('li');
    ul.addEventListener('click',function(e){
            var ele = e.target;

            while(ele.tagName != 'LI'){ 
                if(ele == ul){
                ele = null; 
                break;
            }
                ele = ele.parentNode;   
            }
            console.log(ele);
    })

</script>