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?

• javascript
• jquery

• 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

2 Answers 2

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>