CODEWITHSUNDEEP
javascriptdom-events
bryan sammon
bryan sammon

Reputation: 7441

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

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

Upvotes: 45

Views: 101730

Answers (4)

MD SHAYON
MD SHAYON

Reputation: 8063

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

Upvotes: 1

Jorge Epuñan
Jorge Epuñan

Reputation: 760

/**
 * 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

Upvotes: 1

shito
shito

Reputation: 51

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

    });
  }
}

Upvotes: 5

Felix Kling
Felix Kling

Reputation: 817208

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

Upvotes: 39

Related Questions