Internet Explorer의 addEventListener

Internet Explorer의 addEventListener

---

Internet Explorer 9의 요소 개체에 해당하는 것은 무엇입니까?

if (!Element.prototype.addEventListener) {
    Element.prototype.addEventListener = function() { .. } 
} 

Internet Explorer에서 어떻게 작동합니까?

같은 기능 addEventListener이 있는데 잘 모르겠다면 설명 해주세요.

어떤 도움을 주시면 감사하겠습니다. 문제를 해결하는 완전히 다른 방법을 자유롭게 제안하십시오.

---

addEventListener 이벤트 핸들러를 연결하는 데 사용할 적절한 DOM 메소드입니다.

Internet Explorer (버전 8까지)는 대체 attachEvent방법을 사용했습니다 .

Internet Explorer 9는 적절한 addEventListener방법을 지원합니다 .

다음은 브라우저 간 addEvent함수 를 작성하려는 시도 여야합니다 .

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem["on"+evnt] = func;
   }
}

---

존 레식, jQuery를의 저자의 크로스 브라우저 구현의 자신의 버전을 제출 addEvent하고 removeEventIE의 부적절하거나 존재와 우회하기 호환성 문제를 addEventListener.

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

출처 : http://ejohn.org/projects/flexible-javascript-events/

---

이 솔루션을 사용하고 있으며 IE8 이상에서 작동합니다.

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

그리고:

<button class="click-me">Say Hello</button>

<script>
  document.querySelectorAll('.click-me')[0].addEventListener('click', function () {
    console.log('Hello');
  });
</script>

이것은 IE8과 Chrome, Firefox 등에서 모두 작동합니다.

---

Delan이 말했듯이 최신 버전에는 addEventListener 조합을 사용하고 이전 버전에는 attachEvent 조합을 사용하려고합니다.

MDN에서 이벤트 리스너에 대한 자세한 정보를 찾을 수 있습니다 . (귀하의 리스너에서 'this'값에 대한 몇 가지주의 사항이 있습니다.)

jQuery 와 같은 프레임 워크를 사용 하여 이벤트 처리를 모두 추상화 할 수도 있습니다 .

$("#someelementid").bind("click", function (event) {
   // etc... $(this) is whetver caused the event
});

---

Here's something for those who like beautiful code.

function addEventListener(obj,evt,func){
    if ('addEventListener' in window){
        obj.addEventListener(evt,func, false);
    } else if ('attachEvent' in window){//IE
        obj.attachEvent('on'+evt,func);
    }
}

Shamelessly stolen from Iframe-Resizer.

---

addEventListener is supported from version 9 onwards; for older versions use the somewhat similar attachEvent function.

---

EDIT

I wrote a snippet that emulate the EventListener interface and the ie8 one, is callable even on plain objects: https://github.com/antcolag/iEventListener/blob/master/iEventListener.js

OLD ANSWER

this is a way for emulate addEventListener or attachEvent on browsers that don't support one of those
hope will help

(function (w,d) {  // 
    var
        nc  = "", nu    = "", nr    = "", t,
        a   = "addEventListener",
        n   = a in w,
        c   = (nc = "Event")+(n?(nc+= "", "Listener") : (nc+="Listener","") ),
        u   = n?(nu = "attach", "add"):(nu = "add","attach"),
        r   = n?(nr = "detach","remove"):(nr = "remove","detach")
/*
 * the evtf function, when invoked, return "attach" or "detach" "Event" functions if we are on a new browser, otherwise add "add" or "remove" "EventListener"
 */
    function evtf(whoe){return function(evnt,func,capt){return this[whoe]((n?((t = evnt.split("on"))[1] || t[0]) : ("on"+evnt)),func, (!n && capt? (whoe.indexOf("detach") < 0 ? this.setCapture() : this.removeCapture() ) : capt  ))}}
    w[nu + nc] = Element.prototype[nu + nc] = document[nu + nc] = evtf(u+c) // (add | attach)Event[Listener]
    w[nr + nc] = Element.prototype[nr + nc] = document[nr + nc] = evtf(r+c) // (remove | detach)Event[Listener]

})(window, document)

---

I would use these polyfill https://github.com/WebReflection/ie8

<!--[if IE 8]><script
  src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"
></script><![endif]-->

참고URL : https://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer