Can multiple event listeners/handlers be added to the same element using Javascript?

by

You can do how ever you want it to do. They don’t have to be together, it depends on the context of the code. Of course, if you can put them together, then you should, as this probably makes the structure of your code more clear (in the sense of “now we are adding all the event handlers”).

But sometimes you have to add event listeners dynamically. However, it is unnecessary to test multiple times whether you are dealing with IE or not.

Better would be to abstract from this and test only once which method is available when the page is loaded. Something like this:

var addEventListener = (function() {
    if(document.addEventListener) {
        return function(element, event, handler) {
            element.addEventListener(event, handler, false);
        };
    }
    else {
        return function(element, event, handler) {
            element.attachEvent('on' + event, handler);
        };
    }
}());

This will test once which method to use. Then you can attach events throughout your script with:

addEventListener(window, 'load',videoPlayer);
addEventListener(window, 'load',somethingelse);

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. Firing event on DOM attribute change
  5. How does one capture a Mac’s command key via JavaScript?
  6. event.preventDefault() vs. return false (no jQuery)
  7. Callback on CSS transition
  8. Handle URL fragment identifier (anchor) change event in Javascript
  9. Is there a callback on completion of a CSS3 animation?
  10. How to display a confirmation dialog when clicking an link?
  11. How do I know when I’ve stopped scrolling?
  12. Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
  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. Javascript event e.which?
  16. Listener for property value changes in a Javascript object
  17. How do you detect the clearing of a “search” HTML5 input?
  18. Detect if HTML5 Video element is playing [duplicate]
  19. How to check if any JavaScript event listeners/handlers attached to an element/document? [duplicate]
  20. Fire tab keypress event in JavaScript?
  21. How to Clear/Remove JavaScript Event Handler?
  22. Emulate jQuery “on” with selector in pure Javascript
  23. Popstate on page’s load in Chrome
  24. How do I pass the this context into an event handler?
  25. Is dispatchEvent a sync or an async function
  26. Implementing events in custom object
  27. Reload an HTML page just once using JavaScript
  28. Trigger action on programmatic change to an input value
  29. Detecting support for a given JavaScript event?
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment