".addeventlistener is not a function" why does this error occur?

javascript

event-listeners

dom-manipulation

javascript-best-practices

byAlex Kataev·Sep 30, 2024

The error .addEventListener is not a function usually signifies that the target is not a DOM element or the DOM isn't fully loaded. How to combat this:

Make sure you're targeting a valid DOM element, not an HTMLCollection or a null reference.
Apply the event inside a document.addEventListener('DOMContentLoaded', callback) to ensure all DOM elements are available.

Example:

// Little early bird got nothing. Wait until DOM's awake!
document.addEventListener('DOMContentLoaded', () => {
  // No rush, button only exists if the page is fully loaded
  const button = document.getElementById('myButton');
  button?.addEventListener('click', () => console.log('Button clicked!'));
});

Single versus multiple elements

Distinguish between methods that yield a single element (getElementById) and those that give back collections (getElementsByClassName). The latter returns an HTMLCollection, which must be traversed to attach .addEventListener:

// For 'myButtons', give them ears one by one. They're not twins!
const buttons = document.getElementsByClassName('myButtons');
Array.from(buttons).forEach(button => {
  button.addEventListener('click', () => console.log('Button clicked!'));
});

In times when only one element is required from the collection, target it directly:

// When many buttons do too much, stick to the first fella
document.getElementsByClassName('myButton')[0].addEventListener('click', showComment);

Correctly targeting elements

When creating elements on the fly, like in a showComment function, ensure that the specific button is targeted and the new element is affixed at the correct location in the DOM:

function showComment() {
  // Here's your new stage, Mr. Textarea
  let textarea = document.createElement('textarea');
  // Give it a cozy space right after the button
  this.parentNode.insertBefore(textarea, this.nextSibling);
}

// All buttons get their own 'showComment', no sharing!
buttons.forEach(button => button.addEventListener('click', showComment));

Array-like but not Array

Methods like getElementsByClassName or querySelectorAll yield array-like objects but not actual arrays. To iterate them and attach events, convert them to arrays or traverse with for...of loop:

// Buttons pretending to be an array, busted!
let buttons = document.querySelectorAll('.myButton');
for (let button of buttons) {
  button.addEventListener('click', showComment);
}

Error-proofing your event listeners

To avert the .addEventListener error:

Check your object's type before trying to listen for events.
Make sure all elements are loaded if attaching listeners to dynamically rendered elements.
For dynamic elements, bind events post creation and DOM addition.

Handling dynamic content

Dynamic content (those elements that gatecrash the party after the initial DOM load) need special care when working with event listeners. Here's what you can do:

Verify dynamic binds

When adding an element to the DOM dynamically, make sure to bind the listener to the new element:

// Button worked a lot, deserves a Click! event
const newButton = document.createElement('button');
newButton.innerText = 'Click me!';
newButton.addEventListener('click', showComment);
document.body.appendChild(newButton);

Using event delegation

You can also delegate the listening job to a parent element. It will handle all events bubbling up from its descendants:

// Listening for kids' fights: which button was clicked now?
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('comment-button')) {
    showComment.call(event.target);
  }
});

Cleanup with removeEventListener

If ever you want to improve performance or avoid potential issues with dangling event listeners, summon removeEventListener. It's like the cleaning service for event listeners:

// Adding is fun, cleaning is necessary!
button.addEventListener('click', showComment);
// Button is going on vacation, let's unbind events
button.removeEventListener('click', showComment);