[英]A method of attaching event listener, supported by all major web browsers
I need to write a piece of code that will attach a listener to selected event, and that will work in any popular browser, in any version of it. 我需要编写一段代码,将一个监听器附加到选定的事件,并且可以在任何流行的浏览器中,在任何版本的浏览器中使用。 After doing some searching I came out with following function: 做了一些搜索后,我出来了以下功能:
function addListener(event, thefunction)
{
if(window.addEventListener)
{
//All browsers, except IE before version 9.
window.addEventListener(event, thefunction, false);
}
else if(window.attachEvent)
{
//IE before version 9.
window.attachEvent(event, thefunction);
}
}
Quite simple and seems to be self-explanatory. 很简单,似乎是不言自明的。
There might be some problem with DOMContentLoaded
event, as none version of IE (AFAIK) does recognizes it, and developers are obligated to use onreadystatechange
instead. DOMContentLoaded
事件可能存在一些问题,因为IE(AFAIK)的任何版本都没有识别它,开发人员有义务使用onreadystatechange
。 Solving this problem also seems to be fairly simple, until Internet Explorer 9. You had to write only an extra line in else if(window.attachEvent)
: 解决这个问题似乎也相当简单,直到Internet Explorer 9.你必须在else if(window.attachEvent)
只写一个额外的行else if(window.attachEvent)
:
event = (event == 'DOMContentLoaded') ? 'onreadystatechange' : "on" + event;
This part was always fired in any version of Internet Explorer and this line provided a simple translation of event name, so a correct one was always used. 这部分总是在任何版本的Internet Explorer中触发,这一行提供了事件名称的简单转换,因此总是使用正确的一个。
But what about Internet Explorer 9 (and above)? 但是Internet Explorer 9(及以上版本)呢? In which Microsoft decided that it will drop attachEvent
in favor of addEventListener
. 微软决定放弃attachEvent
以支持addEventListener
。 But doesn't changed onreadystatechange
into DOMContentLoaded
. 但是没有将onreadystatechange
更改为DOMContentLoaded
。
I can't use above line in window.addEventListener
part, because this will rewrite DOMContentLoaded
into onreadystatechange
event even for other browsers and fail there, as they use DOMContentLoaded
. 我不能在window.addEventListener
部分中使用上面的行,因为这会将DOMContentLoaded
重写为onreadystatechange
事件,即使对于其他浏览器也是如此,因为它们使用DOMContentLoaded
。
So, does the only way to solve this problem, is to add browser detection (type and version) to window.addEventListener
part and if it detects that script is dealing with IE 9 or above, it will rewrite event name from DOMContentLoaded
to onreadystatechange
(and supplement other events name with on
, required for IE), and in case of other browsers, will leave event name not changed? 因此,解决此问题的唯一方法是将浏览器检测(类型和版本)添加到window.addEventListener
部分,如果它检测到脚本正在处理IE 9或更高版本,它会将事件名称从DOMContentLoaded
重写为onreadystatechange
(和补充等事件名称与on
,IE浏览器需要),而在其他浏览器的情况下,将离开事件名称没有改变?
Or maybe I'm wrong, because as I just tested, neither DOMContentLoaded
nor onreadystatechange
is being fired in my IE 8 (first one fires correctly in FF / Chrome). 或许我错了,因为正如我刚刚测试的那样,我的IE 8中没有触发DOMContentLoaded
和onreadystatechange
(第一个在FF / Chrome中正确触发)。
And what about jQuery's .on()
function (or similar)? 那jQuery的.on()
函数(或类似的)呢? Does anyone knows, if it supports cross-browser attaching of DOMContentLoaded
, so I can be sure that this specific kind of event will be catch by my script, no matter, in which browser or it's version I'm using? 有谁知道,如果它支持DOMContentLoaded
跨浏览器附加,那么我可以肯定这个特定类型的事件将被我的脚本捕获,无论是在哪个浏览器或它的版本我正在使用?
IE9 supports DOMContentLoaded. IE9支持DOMContentLoaded。 See here . 看到这里 。
With this in mind, you can pretty much* work on the assumption that, if addEventListener
is supported, so is DOMContentLoaded. 考虑到这一点,你几乎可以假设,如果支持addEventListener
,那么DOMContentLoaded也是如此。
(* unless someone lands on your page using Opera 8 or Safari 3.0, probably unlikely). (*除非有人使用Opera 8或Safari 3.0登陆您的页面,否则可能不太可能)。
As for jQuery, it defers to DOMContentLoaded where this is supported but otherwise falls back to its historic means of detecting DOM-ready, which involves repeatedly checking the DOM tree to see if document.body
exists yet. 至于jQuery,它遵循支持这一点的DOMContentLoaded,但是否则会回到其检测DOM就绪的历史方法,这涉及重复检查DOM树以查看document.body
存在。 So you can just use its DOM-ready handler: 所以你可以使用它的DOM就绪处理程序:
$(function() {
without having to use on()
. 无需使用on()
。
More info on how jQuery does it in this answer . 有关jQuery如何在这个答案中做到这一点的更多信息。
DOMContentLoaded
is natively supported in IE9 and above and can be attached through the W3C-standard addEventListener
method which was also implemented in IE9: 在IE9及更高版本中本机支持DOMContentLoaded
,并且可以通过W3C标准的addEventListener
方法附加,该方法也在IE9中实现:
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM ready');
}, false);
That will work in all modern browsers and IE from version 9 and up. 这将适用于所有现代浏览器和从版本9及更高版本的IE。
jQuery 1.x is compatible with IE6+ and any other update-to-date browser. jQuery 1.x与IE6 +和任何其他更新的最新浏览器兼容。 jQuery can hook a DOM ready event cross-browser by shimming support for IE6-8 through the DOM ready handler : jQuery可以通过DOM ready处理程序填充对IE6-8的支持来挂钩DOM ready事件跨浏览器:
$(function() {
//DOM has loaded, put your code here
});
.on()
provides event delegation , but that's rather unrelated to the question. .on()
提供事件委托 ,但这与问题无关。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.