附加事件侦听器的方法,由所有主要Web浏览器支持

Question

我需要编写一段代码,将一个监听器附加到选定的事件,并且可以在任何流行的浏览器中,在任何版本的浏览器中使用.做了一些搜索后,我出来了以下功能:

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

很简单,似乎是不言自明的.

DOMContentLoaded事件可能存在一些问题,因为IE(AFAIK)的任何版本都没有识别它,开发人员有义务使用它onreadystatechange.解决这个问题似乎也很简单,直到Internet Explorer 9.你只需要写一个额外的行else if(window.attachEvent):

event = (event == 'DOMContentLoaded') ? 'onreadystatechange' : "on" + event;

这部分总是在任何版本的Internet Explorer中触发,这一行提供了事件名称的简单转换,因此总是使用正确的一个.

但是Internet Explorer 9(及以上版本)呢？其中微软决定attachEvent支持它addEventListener.但是没有onreadystatechange变成DOMContentLoaded.

我不能window.addEventListener部分地使用上面的行,因为即使对于其他浏览器,它也会重写DOMContentLoaded为onreadystatechange事件,并且在那里失败,因为它们使用DOMContentLoaded.

因此,没有解决这个问题的唯一办法,就是浏览器检测(类型和版本)增加window.addEventListener部分,如果它检测到脚本处理IE 9或以上,它将从改写事件名称DOMContentLoaded来onreadystatechange(和补充其他活动名称with on,IE必需),如果是其他浏览器,会不会更改事件名称？

或许我错了,因为正如我刚刚测试的那样,我的IE 8中都DOMContentLoaded没有onreadystatechange被触发(第一个在FF/Chrome中正确触发).

那jQuery的.on()功能(或类似的)呢？有谁知道,如果它支持跨浏览器附加DOMContentLoaded,所以我可以肯定这个特定类型的事件将被我的脚本捕获,无论是在哪个浏览器或它的版本我正在使用？

Answer 1

IE9支持DOMContentLoaded.看到这里.

考虑到这一点,您几乎可以假设,如果addEventListener支持,DOMContentLoaded也是如此.

(*除非有人使用Opera 8或Safari 3.0登陆您的页面,否则可能不太可能).

对于jQuery,它遵循支持这一点的DOMContentLoaded,但是否则会回到其检测DOM就绪的历史方法,这涉及重复检查DOM树以查看是否document.body存在.所以你可以使用它的DOM就绪处理程序:

$(function() {

无需使用on().

有关jQuery如何在这个答案中做到这一点的更多信息.

Answer 2

DOMContentLoadedIE9 及以上版本原生支持，可以通过 W3C 标准addEventListener方法附加，该方法也在 IE9 中实现：

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM ready');
}, false);

这适用于所有现代浏览器和 IE 9 及更高版本。

jQuery 1.x 与 IE6+ 和任何其他更新到最新的浏览器兼容。jQuery 可以通过DOM 就绪处理程序提供对 IE6-8 的支持来挂钩 DOM 就绪事件跨浏览器：

$(function() {
    //DOM has loaded, put your code here
});

.on()提供事件委托，但这与问题无关。