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[evnt] = func; } }
jQuery作者John Resig提交了他的addEvent
和removeEvent
的跨浏览器实现版本来规避IE不正确或不存在的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/
我正在使用这个解决scheme,并在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上find有关事件侦听器的更多信息。 (注意,在你的监听器中有一些与“this”有关的警告)。
你也可以使用像jQuery这样的框架来抽象事件处理。
$("#someelementid").bind("click", function (event) { // etc... $(this) is whetver caused the event });
从版本9开始支持addEventListener
; 对于旧版本,使用有点类似的attachEvent
函数。
这是在不支持其中之一的浏览器上模拟addEventListener或attachEvent的一种方法
希望会有所帮助
(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)
对于那些喜欢美丽的代码,这是一些东西。
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); } }
无耻地从Iframe-Resizer中窃取。
我会使用这些polyfill https://github.com/WebReflection/ie8
<!--[if IE 8]><script src="ajax/libs/ie8/0.2.6/ie8.js" ></script><![endif]-->