Scenario: I encountered a click on an element on the page when developing a WeChat applet recently. JS captures the click event and obtains some attributes of the element (for example, I customized an author="Li Yibo"), so how to quickly obtain this attribute? In fact, first of all, we need to change the way of writing, start with [data-], the element attribute is data-author="Li Yibo", and bind a click event, bindtap='getAuthor'.
Next, the focus is on the js part
getAuthor : function(e){
console.log(e.currentTarget.dataset.author);//Print Li Yibo
//Look at the value of the e object
console.log(e);//Refer to the figure below
}
(I can't see the picture clearly, double click to see the big picture, I really can't use this editor osChina)
Note: There are two objects in it. The content we want to get is one is target and the other is currentTarget. The difference is simply
e.targetPoints to the object that triggered the event listener.e.currentTargetPoints to the object to add listening events to.
The detailed reasons are as follows: (refer to the self-abbreviated book)
There are two attributes in the DOM event object that always bother me from time to time, namely targetand currentTarget, sometimes it is very confusing to distinguish the difference between the two, so it is necessary to sort out these two attributes to deepen understanding, so as to facilitate future queries .
MDN targetexplains it as a reference to the object that fires the event when the event handler is called during the bubbling or capturing phase of the event.
For currentTarget, it refers to the current target that identifies the event as it traverses the DOM. It always refers to the element the event handler is attached to, not event.target, it identifies the element where the event occurred.
Take an example to illustrate.
event bubbling phase
<!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) // 被点击的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})
</script>
</body>
</html>
We know that it e.targetcan be used to implement event delegation . The principle is to add event listeners to the parent element through event bubbling (or event capture). e.target points to the element that triggered the trigger event. In the above example, it e.targetpoints to what the user clicks li. Due to the event bubbling, lithe click event bubbles up to the ulabove, and the effect of adding a listening event ulto each event is achieved by liadding a listening event, and it e.currentTargetpoints to the object that is listening for the binding event, that is ul, it can be found from here, e.currentTarget===thisreturn true, and e.target===thisreturn false. e.currenttargetand e.targetare not equal.
Note that in the on method provided by jQuery, e.currentTarget is related to the second parameter received by the method, according to jQuery's documentation description
If the selector is omitted or is null, then the event handler is called a direct event or a direct bound event. The handler is executed every time the selected element fires an event, whether it's bound directly to the element or bubbled up from descendant (inner) elements to that element.
When the selector parameter is provided, the event handler is meant to be delegated Events (event delegates or event delegates). Events are not fired on directly bound elements, but event handlers are fired when the selector parameter selector matches a descendant (inner element). jQuery will start bubbling from the event target to the upper element (for example, from the innermost element to the outermost element), and all elements bound to the same event on the propagation path meet the matching selector, then these elements The event on .
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
li{
padding: 5px;
border: 1px solid red;
}
span{
border: 1px solid #000;
}
</style>
</head>
<body>
<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>
</body>
</html>
When li contains child elements, e.target refers to the element that triggers the event, which may be span or li. At this time, e.currentTarget refers to the parameter of selector, which is li in this example. If the selector parameter is omitted, it is the same as e.target and e.currentTarget in addEventListener.
event target stage
We know that there are several different stages in the DOM event flow, as shown in the figure
The above example is the bubbling phase of the event, e.currenttargetand the sums e.targetare not equal, but in the target phase of the event, the sums e.currenttargetare e.targetequal.
<!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')
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>
</body>
</html>
In this example, the target phase of the event is li, since it e.currentTargetalways points to the object that added the listener to the event aLi[i], which is in HTML li, and e.targetpoints to the object that triggers the event listener, too li, and is therefore equal to and e.targetequal to .e.currentTargetthis