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>


推荐阅读更多精彩内容

  • 在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两...
    plainnany阅读 34,084评论 4 43
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 529评论 0 8
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 891评论 2 9
  • JavaScript的组成 JavaScript 由以下三部分组成:ECMAScript(核心):JavaScri...
    纹小艾阅读 1,244评论 0 3
  • 坐在车上,看着窗外 一处处风景从我视野路过。 人生何曾不是路过的风景呢? 人来人往,路过的都路过了。 没有路过的便...
    柒月泣雪阅读 25评论 0 1