Why Does My `addEventListener` Trigger on Page Load Instead of Click?

addEventListener Event Triggered on Page Load

The "addEventListener" event listener is a powerful tool for handling user interactions in web pages. However, an issue commonly encountered is that the event fires upon page load instead of when the targeted element is clicked.

To resolve this problem, the key lies in the callback function that is passed to the "addEventListener" method. In the provided script, the following line is problematic:

el.addEventListener("click", alert("clicktrack"), false);

When this line is executed, the alert is invoked immediately, returning undefined. To correctly pass the alert code to the listener, it needs to be wrapped within a function:

el.addEventListener("click", function() { alert("clicktrack"); }, false);

By doing so, the alert code becomes the body of an anonymous function that will be executed when the event is triggered. This ensures that the event fires only when the "myDiv" element is clicked, not during page load.

The above is the detailed content of Why Does My `addEventListener` Trigger on Page Load Instead of Click?. For more information, please follow other related articles on the PHP Chinese website!