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

I know it is possible with jquery. If you have an option to use. — Alistair Laing, Mar 23 '11 at 20:20

score 39 · Accepted Answer · answered Mar 23 '11 at 20:20

39

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

answered Mar 23 '11 at 20:20

Felix Kling

795,719
175
1,089
1,143

1

Why the convoluted function-called-immediately pattern here? Wouldn't be simpler `if (document.addEventListener) { addEventListener = ... } else { addEventListener = ... }` ? – 6502 Dec 26 '12 at 18:32
1

Just a matter of style. I see the test as something that is completely independent from the surrounding code and thus like to keep it in it's own "container"/context. But you are right, in this case it's not necessary. – Felix Kling Dec 26 '12 at 19:09
Just to be clear attachEvent is old, you should not even be using IE :) for mobile targeting don't even worry about the detection. – Chris Love Feb 18 '13 at 12:57
@ChrisLove thanks! How would that fact change the current answer? Background info: I'm looking for a solution where I want to check if a jQuery library is already available on a page, without interfering with a possible existing window.load function, so basically only attaching my own event there (see http://stackoverflow.com/questions/25756378/how-to-include-jquery-library-in-single-js-file-without-interfering-with-existin/25757856?noredirect=1#comment40318550_25757856) – Adam Sep 11 '14 at 12:57
@Flo: simply use `addEventListener` directly if you don't care for older IE. – Felix Kling Sep 11 '14 at 13:52
@FelixKling thanks! And what about Chris' other comment, for mobile `addEventListener` works just fine? – Adam Sep 11 '14 at 16:06
1

@Flo: Mobile devices usually run the latest version of a browser. It's less fragmented than desktop I believe. – Felix Kling Sep 11 '14 at 16:12

score 5 · Answer 2 · answered Oct 19 '12 at 11:34

I use this function:

function addEvent (obj, type, fn) {
  if (obj.addEventListener) {

    obj.addEventListener(type, fn, false);

  } else if (obj.attachEvent) {

    obj.attachEvent('on' + type, function () {

      return fn.call(obj, window.event);

    });
  }
}

score 1 · Answer 3 · edited Jan 31 '18 at 22:35

/**
 * multipleEventsListeners.js
 * Add the capability to attach multiple events to an element, just like jQuery does
 * https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b
 */

multipleEventsListeners(events, func, elem) {
  elem = elem || document;
  var event = events.split(' ');
  for (var i = 0; i < event.length; i++) {
    elem.addEventListener(event[i], func, false);
  }
}

/*
Use: 
var input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e){
  console.log = this.value;
});
*/

from: https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b

score 0 · Answer 4 · answered Oct 30 '21 at 10:13

by using a named function and passing that into your event listener, you can avoid having to write the same code over and over again.

// Setup our function to run on various events
var someFunction = function (event) {
    // Do something...
};

// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);

addEventListener automatically passes the event object into your function as an

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

4 Answers4

Linked

Related