Internet Explorer 中的 addEventListener
Posted
技术标签:
【中文标题】Internet Explorer 中的 addEventListener【英文标题】:addEventListener in Internet Explorer 【发布时间】:2011-10-19 03:35:57 【问题描述】:Internet Explorer 9 中的 Element Object 等价物是什么?
if (!Element.prototype.addEventListener)
Element.prototype.addEventListener = function() ..
它在 Internet Explorer 中是如何工作的?
如果有一个等于addEventListener
的函数并且我不知道,请解释一下。
任何帮助将不胜感激。随意提出一种完全不同的解决问题的方法。
【问题讨论】:
浏览器是否为其DOM对象实现原型继承方案与是否支持W3CEventTarget interface无关。如果你想测试是否支持,直接测试:if(element.addEventListener) /*supported*/ else /*not supported*/
在所有浏览器中都有效,并且独立于实现。
【参考方案1】:
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;
【讨论】:
最后一个条件还应包括"on"+
。
对于 IE9 和 addEventListener 你需要一个 html5
@pcunite 希望我能更多地投票支持该评论。很重要的一点
另外,由于 IE9 在兼容性视图中使用 IE7 呈现模式,因此只有 attachEvent 有效。因此,重要的是进行此检查而不是依赖 addEventListener。【参考方案2】:
编辑
我写了一个模拟 EventListener 接口和 ie8 接口的 sn-p,即使在普通对象上也可以调用: https://github.com/antcolag/iEventListener/blob/master/iEventListener.js
老答案
这是一种在不支持其中之一的浏览器上模拟 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)
【讨论】:
【参考方案3】:我正在使用此解决方案并在 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 等。
【讨论】:
我的元素有问题(类型未定义) 检查你的文档类型版本,应该是html5 doctype【参考方案4】:这里有一些适合那些喜欢漂亮代码的人。
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盗取。
【讨论】:
【参考方案5】:我会使用这些 polyfill https://github.com/WebReflection/ie8
<!--[if IE 8]><script
src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"
></script><![endif]-->
【讨论】:
【参考方案6】: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/
【讨论】:
这段代码除了添加一个事件监听器之外,还尝试将回调 fn 绑定到 obj,但这是多余的,因为使用 JS 的每个人都应该知道this
。
如果你介绍 John Resig 作为 jQuery 的作者,你会得到更多的选票。
这个实现不完整。它缺少 useCapture 参数。【参考方案7】:
正如 Delan 所说,您希望将 addEventListener 用于较新版本,将 attachEvent 用于较旧版本。
您可以在MDN 上找到有关事件侦听器的更多信息。 (请注意,您的侦听器中的“this”值有一些注意事项)。
您还可以使用像jQuery 这样的框架来完全抽象事件处理。
$("#someelementid").bind("click", function (event)
// etc... $(this) is whetver caused the event
);
【讨论】:
【参考方案8】:从版本 9 开始支持addEventListener
;对于旧版本,使用有点相似的attachEvent
函数。
【讨论】:
以上是关于Internet Explorer 中的 addEventListener的主要内容,如果未能解决你的问题,请参考以下文章
CSS Internet Explorer 5.5 - 6中的PNG支持,带有工作链接
Internet Explorer 中的 CSS“未设置”/“初始”
Internet Explorer 中的 JQuery 选择器问题