这两天去面试的两个小伙伴都遇到了一个问题,面试官问到你用jQuery的时候有没有用过target和currentTarget?他们的区别是什么?他们都是一脸懵,平时练习也没有用过currentTarget啊?其实currentTarget这个属性很是鸡肋,其实我们平时也用不到,下面我们通过两个例子说明平时我们为什么用不到:
举个例子:
<ul>
<li>按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
<li>按钮4</li>
</ul>
<script>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
ul.addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // 被点击的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})
</script>
我们知道,e.target
可以用来实现事件委托,e.target
指向用户点击的li
,而e.currentTarget
指向的是给绑定事件监听的那个对象,即ul
,从这里可以发现,e.currentTarget===this
返回true
,而e.target===this
返回false
。e.currenttarget
和e.target
是不相等的。
总结:
上面的例子是:省略selector或者是null,那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时,就会执行处理程序,不管它直接绑定在元素上,还是从后代(内部)元素冒泡到该元素的
再举一例:
<ul>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
</ul>
<script>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
$('ul').on('click','li',function(e){
console.log(e.target) // 被点击的元素
console.log(e.currentTarget) // li
console.log(e.currentTarget === this) // true
})
</script>
总结:
上面的例子:当li中含有子元素的时候,如果点e.target指的是触发事件的元素,可能是span也可能是li,此时的e.currentTarget指的是selector那个参数,也就是本例中的li。
还有一种情况举例:
<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
<li>hello 4</li>
</ul>
<script>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
for(let i=0;i<aLi.length;i++){
aLi[i].addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // li
console.log(oLi2) // li
console.og(oLi1===oLi2) // true
})
}
</script>
在本例中,事件的目标阶段即li,由于e.currentTarget始终指向添加监听事件的那个对象,即aLi[i],也就是HTML中的li,而e.target指向触发事件监听的那个对象,也是li,因此e.target和e.currentTarget相等,同时也和this相等。
总结
因此不必记什么时候e.currentTarget和e.target相等,什么时候不等,理解两者的究竟指向的是谁即可。
e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。
网友评论