如何比较e.currentTarget和e.Target？

Question

我在按钮单击和背景单击上得到事件。 在后台单击中，我将currentTarget和Target设置为相同，但是在使用按钮的情况下，将变得不同。 如何比较它们是否相等，以便相等时我可以执行一些操作？

Answer 1

event.currentTarget引用侦听器绑定到的element 。

在演示中，我们可以看到是否确实单击了div （可能由于填充大而可能），匹配评估器e.target === e.currentTarget实际上是正确的。

 document.querySelector('#test').addEventListener('click', (e) => { if(e.target === e.currentTarget) console.log('yes'); }); 

 div#test { padding: 20px; background-color: red; } div#test p { background-color: blue; } 

 <div id="test"> Try clicking here and then the P <p id="test2">Test</p> </div> 

Answer 2

事件对象具有一些属性，其中3个是最重要的：

Event.target-引用“事件起源” 。 用外行的术语来说： 单击按钮 ， 用户向其中输入文本的文本框 ， 用户选择的单选按钮等。

Event.currentTarget-对注册的事件侦听器/处理程序的引用。 如果currentTarget恰好是其他标签的祖先，那么currentTarget也可以侦听所有其他标签的事件。 由于事件传播/冒泡，这是可能的，有关更多详细信息，请参考事件委托 。

Event.type-基本上是单击，输入，更改，提交，重置，DOMContentLoaded等。

---

事件委托的关键是确定Event.target （发生变化的）是否不是 Event.currentTarget （除非未注册到事件，否则不会发生变化）。

演示中详细评论

 // Reference <form> var current = document.forms[0]; // Register <form> to click, input, and change events current.onclick = current.oninput = current.onchange = manageEvt; // Callback function passes Event Object (e) function manageEvt(e) { // This is <form> - tag registered to event(s) var cur = e.currentTarget; // This is the tag that is event origin (clicked, changed, etc.) var tgt = e.target; // This is the event type (click, input, and change) var evt = e.type; /* "this" is currentTarget (<form>) .elements is all form controls of "this" .out is the <output> id */ var out = this.elements.out; // Clear <output> out.value = ''; /* if clicked, inputted, or changed tag is NOT <form>... ...display message... Otherwise if only the <form> is clicked display another message. */ if (tgt !== cur) { out.value = '#' + tgt.id + ' is Event.target for ' + evt.toUpperCase() + ' EVENT ------------------value: ' + tgt.value; } else if (tgt === cur) { out.value = '#' + tgt.id + ' is Event.target and Event.currentTarget for ' + evt.toUpperCase() + ' EVENT'; } else return false; } 

 form { border: 3px dashed red; padding: 30px; } 

 <form id='CURRENT'> <button id='BUTTON' name='tgt' type='button' value="button">CLICK EVENT</button><br> <input id='TEXT' name='tgt' type='text' placeholder='INPUT EVENT'><br> <input id='RADIOA' name='tgt' type='radio' value="A"> A <input id='RADIOB' name='tgt' type='radio' value="B"> B<br> <output id='out'></output> </form>