There are many ways you can check the when using event delegation: by its ID, by its classes, by its tag name, by its attributes, and more. But the easiest way is to use the matches() method.

The matches() method is analogous to the is() method in jQuery. You pass in any valid CSS selector and then the method will return true or false.

Basic usage

Given the following HTML element:

<h1 class="heading" data-heading>Heading 1</h1>

And the following JavaScript variable:

var heading = document.querySelector("h1");

Here are some examples of the matches() method:

// Returns TRUE (the element IS an <h1>)

// Returns TRUE (the element HAS the .heading class)

// Returns TRUE (the element HAS the data-heading attribute)

// Returns FALSE (the element does NOT have the #heading ID)

// Returns FALSE (the element is NOT an <input>)

// Returns FALSE (the data-heading attribute does NOT have a value of 1)

Usage in an event listener

Given the following HTML, imagine that when one of the three paragraphs is clicked, I want to log its textContent to the console:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
<small>Copyright &copy; Example</small>

In the following snippet, you can see the matches() method in action. I used it within the logText() function.

Notice that I'm using the logical NOT operator (!) here. I'm using a guard clause which means I want to check if the element is not a paragraph:

// Get the main element
var main = document.querySelector("main");

* Log a paragraph's textContent
* @param {Object} event The Event object

function logText (event) {

// If NOT a paragraph, do nothing
if (!"p")) return;

// Log the paragraph's textContent


// Log paragraphs' textContent on click
main.addEventListener("click", logText);


It's important to note that the matches() method is implemented with vendor prefixes in a handful of browsers.

For consistent behaviour, you should either include the polyfill in your codebase or polyfill your site automatically using a service like

Further reading

Check out the following resources to learn more about the matches() method: