Why Doesn\'t `classname.addEventListener(\'click\', myFunction(), false);` Work for Adding Event Listeners to Classes?

Event Listener for Class: A Practical Guide

In a quest to capture class attribute values upon clicks, you may have encountered an issue with your JavaScript code. Specifically, the line classname.addEventListener('click', myFunction(), false); fails to register event listeners on the elements.

To address this problem, let's analyze the code step by step:

1. getElementsByClassName: This method correctly selects elements with the specified class name. However, it does not return an array but an Array-like object called HTMLCollection.
2. addEventListener: This method takes three parameters: (a) event type (in this case, 'click'), (b) event listener function, and (c) capture phase (typically false for bubbling events). In the code, myFunction() is executed immediately when the addEventListener method is invoked, passing the result of the function call as an event listener. This is incorrect.
3. The Function: The anonymous function myFunction fetches the attribute "data-myattribute" and displays it in an alert box. This part of the code is correct.

Corrected Code:

To address the issue, we need to correctly attach event listeners to each element returned by getElementsByClassName. Here's the corrected code:

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);
}

Explanation of Correction:

1. Array-like Object: We store the HTMLCollection in the elements variable for better usage.
2. Looping: To attach listeners to each element, we iterate over the elements Array-like object using a loop.
3. EventListener: The correct syntax for adding an event listener is used, passing the myFunction as the listener.

In ES6, the loop and event listener addition can be achieved more concisely:

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

For older browsers, like IE6-8, consider checking for the existence of getElementsByClassName before using it.

The above is the detailed content of Why Doesn\'t `classname.addEventListener(\'click\', myFunction(), false);` Work for Adding Event Listeners to Classes?. For more information, please follow other related articles on the PHP Chinese website!