---
title: Event element selectors
description: This article describes the element selectors used with event listeners.
url: https://docs.tealium.com/iq-tag-management/events/selectors/
---
Most event listeners require that you specify which element on a page you want trigger the event listener. For example, configuring a click event to track when a visitor clicks on a specific ad banner or button, or when a visitor plays a specific embedded video.
Specify the element to track by element ID, class, or a complex selector.
| Selector type | Example | Description |
| ------------- | ------- | ----------- |
| Element ID | `#email-address` | A form field to collect email address |
| Class | `.form-field`| Any form field|
| Complex selector | `div#feedback-form:not(.main) input[name='email']` | A form field named email in a `div` with ID `feedback-form`, but not within a `div` with class `main`. |
| Multiple elements | `.btn-cart, .btn-cart span` | Tracks clicks on the main element and any clickable nested elements. |
The event system uses the `Element.matches()` method for the selector. For more information about this method, see [Element.matches() at Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches).
## When to use multiple-element selectors
Sometimes, an event doesn’t trigger even when the selector is valid. This often happens when the clicked element is nested inside the intended target element.
Tealium events attach cursor-based event listeners (such as `click`, `mousedown`, or `mouseup`) to the page’s ``. When a user interacts with the page, the event handler checks whether the clicked element (`event.target`) matches the selector you provided. This behavior differs from the jQuery `onHandler` extension, which binds events directly to the elements that match the selector.
Here’s an example of how a click event listener works in Tealium:
```js
document.body.addEventListener("click", function(event) {
if (event.target.matches("SELECTOR")) {
console.log("Element clicked:", event.target.textContent);
// Track event
}
});
```
If your selector only targets the outer element (such as a button), and a user clicks a nested element (such as a `` inside the button), the event listener won't trigger. In this case, use a multiple-element selector that includes both the main element and its nested clickable content.
### Example - Add to Cart button
Suppose you want to track clicks on an "Add to Cart" button with the following HTML:
```html
```
Using the selector `.btn-cart` alone won’t always work. If the user clicks on the ``, `event.target` is the ``, not the `