Javascript – arrow functions this in event handler?

by

With arrow function as a callback, instead of using this to get the element to which the handler is bound, you should use event.currentTarget.
Value of this inside an arrow function is determined by where the arrow function is defined, not where it is used.
So from now on, keep in mind that
event.currentTarget always refers to the DOM element whose EventListeners are currently being processed.

.currentTarget vs .target

Use event.currentTarget instead of event.target because of event bubbling/capturing:

  • event.currentTarget– is the element that has the event listener attached to.
  • event.target– is the element that triggered the event.

From the documentation:

currentTarget of type EventTarget, readonly Used to indicate the
EventTarget whose EventListeners are currently being processed. This
is particularly useful during capturing and bubbling.

Check the basic example in the below snippet

var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {
  
  document.getElementById('msg').innerHTML = "this: " + this.id +
    "<br> currentTarget: " + e.currentTarget.id +
    "<br>target: " + e.target.id;
});

$('#parent').on('click', function(e) {

  $('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
                   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
                   + "<br>target: " + $(e.target).prop('id'));
});

$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));
#parent {background-color:red; width:250px; height:220px;}
#child {background-color:yellow;height:120px;width:120px;margin:0 auto;}
#grand-child {background-color:blue;height:50px;width:50px;margin:0 auto;}
#msg, #jQmsg, #arrmsg {font-size:16px;font-weight:600;background-color:#eee;font-family:sans-serif;color:navy;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="parent">Parent-(attached event handler)<br><br>
    <div id="child"> Child<br><br>
      <p id="grand-child">Grand Child</p>
    </div>
  </div>
 
  <div id="msg"></div><br>
  <div id="jQmsg"></div><br>
  <div id="arrmsg"></div>

More Related Contents:

  1. Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)
  2. How to import jquery using ES6 syntax?
  3. jQuery multiply vars inside value [duplicate]
  4. How to disable browser reload button on mouse click
  5. Jquery if statement with two class conditions [closed]
  6. How to check if element is visible after scrolling?
  7. Extract hostname name from string
  8. What does the @ mean inside an import path?
  9. Trigger css hover with JS [duplicate]
  10. Can I disable a CSS :hover effect via JavaScript?
  11. How to get a HTML element from a string with jQuery
  12. Not class selector in jQuery
  13. Setting href attribute at runtime
  14. How to loop and render elements in React.js without an array of objects to map?
  15. How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?
  16. width/height after transform
  17. Is JavaScript multithreaded?
  18. putting html inside an iframe (using javascript)
  19. When should I use brackets with imports
  20. Detect if a page has a vertical scrollbar?
  21. How to copy all the attributes of one element and apply them to another?
  22. How do I abort image load requests without using window.stop()
  23. Performance difference between jQuery’s .live(‘click’, fn) and .click(fn)
  24. Redirect automatically when selecting an item from a select drop-down list
  25. Checking password match while typing
  26. jQuery trigger action when a user scrolls past a certain part of the page
  27. Error: How to serialize data from getStaticProps : Next.js
  28. Uploading multiple files asynchronously by blueimp jquery-fileupload
  29. How to pass variable value between different html pages in javascript
  30. Attach a blob to an input of type file in a form

Leave a Comment