最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to compare e.currentTarget and e.Target? - Stack Overflow

programmeradmin3浏览0评论

I am getting events on button click and background click. In background click I am getting currentTarget and Target both same but in case of button, I am getting different. How can I pare if they are equal or not so that on equal I can perform some operation?

I am getting events on button click and background click. In background click I am getting currentTarget and Target both same but in case of button, I am getting different. How can I pare if they are equal or not so that on equal I can perform some operation?

Share Improve this question asked Apr 2, 2019 at 4:28 OliverOliver 5811 gold badge8 silver badges14 bronze badges 2
  • 2 What is a "background click"? Also, do you mean if (e.target === e.currentTarget)? – Phil Commented Apr 2, 2019 at 4:28
  • @Phil "background" seems to refer to clicking the element, but not the button inside it. – Bergi Commented Apr 2, 2019 at 7:33
Add a ment  | 

2 Answers 2

Reset to default 3

event.currentTarget refers to the element that the listener was bound to.

Here in the demo we can see if we do actually click the div (possible because of enormous padding) the the match evaluator e.target === e.currentTarget is in fact true.

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>

The Event Object has some properties of which 3 are the most important:

Event.target - Reference to the "origin of event". In layman's terms: clicked button, textbox the the user has inputted text into, radio button user has selected, etc.

Event.currentTarget - Reference to the registered event listener/handler. If the currentTarget happens to be an ancestor to other tags -- then that currentTarget can listen for events for all of them as well. This is possible because of Event Propagation/bubbling, refer to Event Delegation for more details.

Event.type - Basically a click, input, change, submit, reset, DOMContentLoaded, etc.


The key to Event Delegation is to find out if Event.target (which changes) is not Event.currentTarget (which doesn't change unless it's unregistered to event(s).).

Details mented in demo

// Reference <form>
const 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)
  const cur = e.currentTarget;
  // This is the tag that is event origin (clicked, changed, etc.)
  const tgt = e.target;
  // This is the event type (click, input, and change)
  const evt = e.type;
  /*
  "this" is currentTarget (<form>) 
  .elements is all form controls of "this"
  .out is the <output> id
  */
  const 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;

  }
  if (tgt === cur) {
    out.value = '#' + tgt.id + ' is Event.target and Event.currentTarget for ' + evt.toUpperCase() + ' EVENT';

  } 
}
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>

发布评论

评论列表(0)

  1. 暂无评论