순수 네이티브 javascript에서 jQuery의 "on"및 "off"

Question

순수 JavaScript 코드에서 jQuery의 "on"및 "off"기능을 나타내는 방법을 찾고 있습니다. 예를 들어

:

jQuery("my_selector_here").on("click", function(){ 
    // some code here... 
}) 

가장 (전체) 정확한 방법으로 표현 될 경우, 뭔가 같은 :

myobj.fn.on = function(){ 
    // pure javascript code here... 
} 

미리 감사드립니다!

Answer 1

가장 많이 사용되는 방법은 DOM의 Element.prototype.addEventListener 메소드를 사용하는 것입니다. 꽤 똑바로 보이는 것

elem.addEventListener('click', function(event) { 
}, false); 

즉, 다른 마법과 더불어 jQuery가 아래에서 호출 할 것입니다. 라이브러리가 다루는 가장 큰 문제는 old'ish Internet Explorer가 요소에 이벤트를 추가하는 데 다른 구문을 사용한다는 것입니다. 이들은 약간의 차이점이있는 elem.attachEvent 방법을 사용했습니다.

순진한 말로하면 Elements.prototype에 추가 할 수 있습니다. 예를 들어

Element.prototype.on = function(name, callback) { 
    this.addEventListener(name, callback, false); 
}; 

은 .. 그리고 우리는,

document.body.on('click', function() { 
    // code 
}); 

참고 : addEventListener처럼 jQuery .on