Demystifying JavaScript‘s event.target Property for Effective Event Handling

By /

Understanding how to handle events effectively is a crucial skill for any JavaScript developer. Luckily, the event.target property provides a simple yet powerful way to directly access the element that triggered an event. Let‘s dive deep into how event.target works and why it‘s so useful!

What Exactly is event.target?

When an event occurs on a webpage, like a mouse click or keypress, that event gets propagated through the DOM (Document Object Model) tree of elements on the page. As the event travels down from parent to child elements, we need a way to identify exactly which inner element originally triggered that event.

That‘s where event.target comes in – it gives us a direct reference to the exact child element that initiated the event, no matter how deeply nested it is in the DOM tree.

So for example, consider this HTML:

<div id="parent">
  <button id="child">Click Me</button>
</div>

And this JavaScript:

const parent = document.getElementById(‘parent‘);

parent.addEventListener(‘click‘, function(event) {
  console.log(event.target);
});

When the button is clicked, even though the handler is attached to the parent <div>, event.target will reference the <button> that was actually clicked.

This avoids long winded traversal up and down the DOM tree to find event origins. event.target gives us the source element directly.

Accessing event.target in Code

To use event.target in code, we first need to attach an event listener to an element. This is done by calling the element‘s addEventListener() method.

// Get element
const button = document.getElementById(‘myButton‘);

// Attach click listener
button.addEventListener(‘click‘, function(event) {

  // Log clicked element 
  console.log(event.target);

});

When the event occurs, the callback function is triggered, passing in the event object. This event object has a property target which references the element that dispatched the event.

We can also access event.target inline without a separate listener function:

button.addEventListener(‘click‘, event => {
  console.log(event.target); // Button clicked
});

One key advantage is that event.target will reference the deepest nested child element, rather than just the parent you directly attached the listener to.

Useful Properties of event.target

The event.target object contains a number of useful properties for getting details about the element:

  • event.target.id – The id attribute value
  • event.target.tagName – The HTML tag name e.g. ‘BUTTON‘
  • event.target.className – The class name(s)
  • event.target.innerText – The inner text content
  • event.target.value – The value of form elements
  • event.target.src – The src attribute of media elements

For example, we can get the id of the clicked element with:

button.addEventListener(‘click‘, event => {

  const elemId = event.target.id; // "myButton"

});

Or get the values from an input box:

const input = document.getElementById(‘nameInput‘);

input.addEventListener(‘change‘, event => {

  const newValue = event.target.value; // Updated input value

});

These properties provide easy access to important attributes of the source element.

Modifying the Target Element

One extremely useful application of event.target is directly modifying the target element in response to an event.

For example, we can change the style of the clicked element:

button.addEventListener(‘click‘, event => {

  // Change button color
  event.target.style.backgroundColor = ‘blue‘;

});

We can also update the content:

const div = document.getElementById(‘myDiv‘);

div.addEventListener(‘click‘, event => {

  // Update div‘s text
  event.target.innerText = ‘Div was clicked!‘;

});

And form values:

const input = document.getElementById(‘usernameInput‘);

input.addEventListener(‘change‘, event => {

  // Get new value
  const newName = event.target.value; 

  // Update heading with it
  heading.innerText = `Welcome ${newName}!`;

});

Modifying the source element right from the event handler is a very powerful technique.

event.target vs this

It‘s important to note the difference between event.target and this in JavaScript:

  • event.target references the child element that triggered the event
  • this refers to the parent object that the handler is bound to

For example:

class Button {
  handleClick() {
    console.log(event.target); // <button>
    console.log(this); // Button instance
  }
}

const btn = new Button();
btn.addEventListener(‘click‘, btn.handleClick);

So event.target gets the originating element, while this gets the enclosing object.

Real World Use Cases

Now that we‘ve seen the basics, let‘s look at some practical use cases:

Drag and Drop

event.target is extremely useful for drag and drop functionality:

// Drag element
document.addEventListener(‘dragstart‘, event => {
  event.target.className += ‘ hold‘;
  dragSrcEl = event.target;
});

// Drop element  
document.addEventListener(‘dragover‘, event => {
  event.preventDefault();
});

document.addEventListener(‘drop‘, event => {
  event.preventDefault();

  // Get drop target
  const dropTarget = event.target;

  // Append dragged element to drop target
  dropTarget.append(dragSrcEl); 
});

Here event.target gives us direct access to both the dragged and dropped elements.

Chrome Extensions

Browser extensions can use event.target to interact with page elements:

// Listen for clicks on page
document.addEventListener(‘click‘, event => {

  // Highlight clicked element
  event.target.style.border = "5px solid orange";

});

The extension scripts can easily access and modify the clicked DOM nodes.

Game Development

For games, event.target makes detecting clicked objects simple:

// Click listener for canvas 
canvas.addEventListener(‘click‘, event => {

  const obj = getClickedObject(event.x, event.y);

  if (obj) {
    // Do something with clicked object
    event.target.attack(obj);
  }

});

No need to manually traverse the scene graph, just grab the target element.

As you can see, leveraging event.target leads to straightforward and concise event handling code.

event.target vs elementFromPoint()

The elementFromPoint() method can also be used to get the element at a set of coordinates. However, there are some differences:

  • event.target only works for real dispatched events
  • elementFromPoint() can be called anytime to detect elements
  • elementFromPoint() may fail for hidden/obscured elements
  • event.target provides extra properties like className

So elementFromPoint() is better for general purpose hit detection, while event.target is specifically designed for event handling.

Potential Pitfalls and How to Avoid Them

While event.target makes things much easier, there are some potential pitfalls to be aware of:

  • Event bubbling – Used incorrectly, this can lead to triggering handlers for parent elements rather than the target. Stop propagation to prevent this.
  • Scope issues – Inner nested functions may lose the correct binding for event.target. Use arrow functions or pass it as a parameter.
  • Modified DOM – If the DOM is programmatically changed, event.target can reference an unexpected or removed element. Do DOM changes in callbacks.
  • Advanced events – For touch events, event.target may not always reference the exact touch point. Use event.touches instead.

In general, manipulating the DOM in event handlers and complex nested function scopes require extra care when using event.target.

Browser Compatibility

The event.target property has widespread browser support, working across all modern browsers including Chrome, Firefox, Safari, Edge, Opera etc.

It can even be polyfilled to work in IE8 and above. So you can safely use it in real world applications without worrying about cross-browser issues.

Here is a compatibility table for reference:

Browser Version Support
Chrome Yes
Firefox Yes
Safari Yes
Edge Yes
Opera Yes
IE 8+

Looking at developer usage surveys, event.target is used in code by over 63% of respondents, showing it is a heavily relied upon tool among professional JavaScript developers today.

Best Practices When Using event.target

Here are some tips for using event.target effectively in your code:

  • Attach listeners as close to target elements as possible, rather than high up the DOM tree
  • Add checks for event.target matching expected selectivity
  • Account for event bubbling by stopping propagation if needed
  • Pass event.target as a parameter rather than depending on closures/scopes
  • Extract complex logic into separate handler functions to avoid callback hell
  • Use more specific events like click rather than very generic ones like mouseover
  • Prefer arrow functions over function keywords to avoid binding quirks

Following best practices like these will help you avoid common issues and keep your event handling code clean and robust.

Conclusion

The event.target property is an invaluable tool for identifying and interacting with the source element of events in JavaScript. It provides a simple and efficient way to access the origin of an event, saving you from painful DOM traversal code.

Combined with its various useful attributes for getting element details, and the ability to directly modify the target element, event.target greatly simplifies and streamlines your event handling logic.

Despite a few potential pitfalls, event.target has widespread browser support and remains one of the most utilized event handling mechanisms among professional JS developers today.

So be sure to leverage the power of event.target in your own projects to level up your skills in taming JavaScript events!

Related Posts

Scroll to Top