여러 이벤트 리스너/핸들러를 javascript를 사용하여 동일한 요소에 추가 할 수 있습니까?

Question

나는 가지고있다 :

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

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

.

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

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

    }); 
    } 
} 

Answer 3

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

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