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

Question

I have:

if (window.addEventListener) {
  window.addEventListener('load',videoPlayer,false);
}
else if (window.attachEvent) { 
  window.attachEvent('onload',videoPlayer);
}

and then later I have:

if (window.addEventListener) {
  window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) { 
  window.attachEvent('onload',somethingelse);
}

Is it preferred/functional to have them all together? Like

if (window.addEventListener) {
  window.addEventListener('load',videoPlayer,false);
  window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) { 
  window.attachEvent('onload',videoPlayer,false);
  window.attachEvent('onload',somethingelse);
}

question from:https://stackoverflow.com/questions/5411055/can-multiple-event-listeners-handlers-be-added-to-the-same-element-using-javascr

Answer 1

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