Learning jQuery 3 - Fifth Edition

Event targets

Now we have the event object available to us as event within our handler. The property event.target can be helpful in controlling where an event takes effect. This property is a part of the DOM API, but is not implemented in some older browser versions; jQuery extends the event object as necessary to provide the property in every browser. With .target, we can determine which element in the DOM was the first to receive the event. In the case of a click event, this will be the actual item clicked on. Remembering that this gives us the DOM element handling the event, we can write the following code:

$(() => {  $('#switcher')    .click(function(event) {      if (event.target == this) {         $(this)          .children('button') .toggleClass('hidden'); ...