JavaScript click event listener on class

by

This should work. getElementsByClassName returns an array Array-like object(see edit) of the elements matching the criteria.

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

jQuery does the looping part for you, which you need to do in plain JavaScript.

If you have ES6 support you can replace your last line with:

    Array.from(elements).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });

Note: Older browsers (like IE6, IE7, IE8) don´t support getElementsByClassName and so they return undefined.

Correction

getElementsByClassName doesn’t return an array, but a HTMLCollection in most, or a NodeList in some browsers (Mozilla ref). Both of these types are Array-Like, (meaning that they have a length property and the objects can be accessed via their index), but are not strictly an Array or inherited from an Array (meaning other methods that can be performed on an Array cannot be performed on these types).

Thanks to user @Nemo for pointing this out and having me dig in to fully understand.

More Related Contents:

  1. window.onload vs $(document).ready()
  2. Detect Click into Iframe using JavaScript
  3. Prevent form submission on Enter key press
  4. How to get a word under cursor using JavaScript?
  5. How to find out which JavaScript events fired?
  6. Listening for variable changes in JavaScript
  7. How do I programmatically click on an element in JavaScript?
  8. On Text Highlight Event?
  9. Callback on CSS transition
  10. Handle URL fragment identifier (anchor) change event in Javascript
  11. Accessing an object’s property from an event listener call in JavaScript
  12. Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
  13. Create a file using Javascript in Chrome on client side
  14. How to know whether refresh button or browser back button is clicked in Firefox [duplicate]
  15. Detect if HTML5 Video element is playing [duplicate]
  16. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  17. Perform action when clicking HTML5 datalist option
  18. Detect mousemove when over an iframe?
  19. Fire tab keypress event in JavaScript?
  20. How to detect in iOS webapp when switching back to Safari from background?
  21. How to Clear/Remove JavaScript Event Handler?
  22. Do Javascript promises block the stack
  23. Event Capturing vs Event Bubbling [duplicate]
  24. Popstate on page’s load in Chrome
  25. How do I pass the this context into an event handler?
  26. JavaScript: SyntaxError: missing ) after argument list
  27. Implementing events in custom object
  28. How to detect if user has enabled full screen in browser
  29. Detecting support for a given JavaScript event?
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment