event.target

The DOM element that initiated the event.

.event.target()🡢 Element

The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.

Display the tag's name on click

JS
<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
CSS
span,
strong,
p {
  padding: 8px;
  display: block;
  border: 1px solid #999;
}
HTML
$("body").click(function (event) {
  $("#log").html("clicked: " + event.target.nodeName);
});
DEMO

Implements a simple event delegation: The click handler is added to an unordered list, and the children of its li children are hidden. Clicking one of the li children toggles (see toggle()) their children.

JS
<ul>
  <li>
    item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>
    item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>
HTML
function handler(event) {
  var target = $(event.target);
  if (target.is("li")) {
    target.children().toggle();
  }
}
$("ul").click(handler).find("ul").hide();
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)