e.target和e.currenttarget的区别

// 二者在没有冒泡的状况下,是同样的值,但在用了事件委托的状况下,就不同了,例如:
// DOM 结构code

<ul id="ulT">
    <li class="item1">1</li>
    <li class="item2">2</li>
    <li class="item3">3</li>
    <li class="item4">4</li>
    <li class="item5">5</li>
</ul>

// 此时target和currentTarget是同样的 都是点击的li标签事件

var lis = document.querySelectorAll('li');
for(var i =0;i<lis.length;i++){
    lis[i].onclick= function (e) {
        console.log(e.target);  
        console.log(e.currentTarget);
    }
}

$('li').click(function (e) {
    console.log(e.target);
    console.log(e.currentTarget);
})

// 此时是不同的get

var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
    console.log(e.target);  //当前的li
    console.log(e.currentTarget); //元素的ul
})


$('ul').click(function (e) {
    console.log(e.target);  //当前的li
    console.log(e.currentTarget); //元素的ul
})
相关文章
相关标签/搜索