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

Event Object具有一些属性，其中3个是最重要的：

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

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

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

事件委托的关键是找出D（发生变化）是否不 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;
}

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

2 个答案: