addEventListener trong Internet Explorer

Question

Tương đương với đối tượng yếu tố trong Internet Explorer 9 là gì?

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

Tính năng này hoạt động như thế nào trong Internet Explorer?

Nếu có chức năng bằng addEventListener và tôi không biết, hãy giải thích.

Mọi trợ giúp sẽ được đánh giá cao. Vui lòng đề xuất một cách hoàn toàn khác để giải quyết vấn đề.

Answer 1

addEventListener là phương pháp DOM thích hợp để sử dụng để gắn trình xử lý sự kiện.

Internet Explorer (tối đa phiên bản 8) đã sử dụng phương thức attachEvent thay thế.

Internet Explorer 9 hỗ trợ phương thức addEventListener thích hợp.

Sau đây là một nỗ lực để viết chức năng addEvent trên nhiều trình duyệt.

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[evnt] = func; 
    } 
} 

Answer 2

addEventListener được hỗ trợ từ phiên bản 9 trở đi; cho các phiên bản cũ sử dụng chức năng tương tự như attachEvent.

Answer 3

Như Delan đã nói, bạn muốn sử dụng kết hợp addEventListener cho các phiên bản mới hơn và attachEvent cho các phiên bản cũ hơn.

Bạn sẽ tìm thấy thêm thông tin về trình xử lý sự kiện trên MDN. (Lưu ý có một số cảnh báo với giá trị của 'this' trong trình nghe của bạn).

Bạn cũng có thể sử dụng một khung như jQuery để trừu tượng xử lý sự kiện hoàn toàn.

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

Answer 4

John Resig, tác giả jQuery, nộp phiên bản của ông thực hiện qua trình duyệt của addEvent và removeEvent để phá vỡ vấn đề tương thích với IE không đúng hoặc không tồn tại 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); 
} 

Nguồn: http://ejohn.org/projects/flexible-javascript-events/

Answer 5

Tôi đang sử dụng giải pháp này và các công trình trong IE8 hoặc cao hơn.

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

Và sau đó:

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

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

này sẽ làm việc cả IE8 và Chrome, Firefox, vv

Answer 6

EDIT

tôi đã viết một đoạn mã sẽ bắt chước giao diện EventListener và ie8 một, là callable thậm chí trên các đối tượng đơn giản: https://github.com/antcolag/iEventListener/blob/master/iEventListener.js

OLD ĐÁP

này là một cách để addEventListener thi đua hoặc attachEvent trên các trình duyệt không hỗ trợ một trong những yêu cầu
hy vọng này sẽ giúp

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

Answer 7

Tôi sẽ sử dụng những polyfill https://github.com/WebReflection/ie8

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

Answer 8

Dưới đây là một cái gì đó cho những ai muốn mã đẹp.

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

Không bị đánh cắp vô nghĩa từ Iframe-Resizer.