相当于Internet Explorer 9中的Element对象?
if (!Element.prototype.addEventListener) {
Element.prototype.addEventListener = function() { .. }
}
在Internet Explorer中如何运作?
如果有一个函数等于addEventListener
我不知道,请解释。
任何帮助,将不胜感激。随意提出解决问题的完全不同的方法。
Answers:
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"+
。
约翰Resig的,jQuery的作者,他提交的跨浏览器实现的版本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/
this
。
我正在使用此解决方案,并且可以在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等均可使用。
对于喜欢精美代码的人来说,这是一些东西。
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偷来的无耻。
addEventListener
从版本9开始受支持;对于较旧的版本,请使用稍微相似的attachEvent
功能。
编辑
我写了一个片段来模拟EventListener接口和ie8,即使在普通对象上也可以调用: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)
我会使用这些polyfill https://github.com/WebReflection/ie8
<!--[if IE 8]><script
src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"
></script><![endif]-->
if(element.addEventListener) {/*supported*/} else {/*not supported*/}
在所有浏览器中均有效,并且独立于实现。