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
2 Answers
Reset to default 3event.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 notEvent.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>