Можно ли добавить нескольких слушателей/обработчиков событий к одному элементу с помощью javascript?

У меня есть:

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

а затем позже:

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

Является ли это предпочтительным/функциональным, чтобы все они были вместе? Как

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

Ответ 1

Вы можете делать все, что захотите. Им не обязательно быть вместе, это зависит от контекста кода. Конечно, если вы можете собрать их вместе, то вы должны, так как это, вероятно, делает структуру вашего кода более понятной (в смысле "теперь мы добавляем все обработчики событий" ).

Но иногда вам приходится добавлять динамические прослушиватели событий. Тем не менее, нет необходимости проверять несколько раз, имеете ли вы дело с IE или нет.

Лучше было бы отвлечься от этого и протестировать только один раз, когда этот метод доступен, когда страница загружена. Что-то вроде этого:

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

Это будет проверять один раз, какой метод использовать. Затем вы можете прикреплять события на протяжении всего script с помощью:

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

Ответ 2

Я использую эту функцию:

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

    });
  }
}

Ответ 3

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

multipleEventsListeners(elem, events, func) {
  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