当前位置：网站首页>e. Difference between target and e.currenttarget

e. Difference between target and e.currenttarget

2022-06-29 02:04:00 【wam923259736】

stay DOM There are two properties in the event object that always bother me from time to time , Namely target and currentTarget, Sometimes I'm confused about the difference between the two , Therefore, it is necessary to sort out these two attributes , Deepen the understanding , For future query .
MDN Chinese vs target The explanation of is , A reference to an object that triggers an event , When an event handler is called during the bubble or capture phase of an event .
And for currentTarget, It refers to when the event traverses DOM when , Identifies the current target of the event . It always refers to the element to which the event handler is attached , instead of event.target, It identifies the element where the event occurred .
Let me give you an example .

Event bubbling stage 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <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') ul.addEventListener('click',function(e){
       let oLi1 = e.target let oLi2 = e.currentTarget console.log(oLi1) //  Clicked li console.log(oLi2) // ul console.og(oLi1===oLi2) // false }) </script>
</body>
</html>

We know ,e.target Can be used to implement event delegation , The principle is bubbling through events （ Or event capture ） Add event listeners to the parent element ,e.target Point to the element that triggers the event , As in the above example ,e.target Point to what the user clicked li, Bubbling with Events ,li Click on the event bubble to ul On , By giving ul Add listening events to each li Add the effect of listening Events , and e.currentTarget It refers to the object listening for the binding event , namely ul, From here we can find ,e.currentTarget=this return true, and e.target=this return false.e.currenttarget and e.target It's not equal .

原网站

版权声明
本文为[wam923259736]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/180/202206290157151538.html

边栏推荐

猜你喜欢

随机推荐