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（并补充其他事件名称on，IE必需），如果是其他浏览器，会不会更改事件名称？

或许我错了，因为正如我刚刚测试的那样，我的IE 8中没有DOMContentLoaded和onreadystatechange被触发（第一个在FF / Chrome中正确触发）。

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

Answer 1

IE9支持DOMContentLoaded。请参阅here。

考虑到这一点，你几乎可以假设，如果支持addEventListener，那么DOMContentLoaded也是如此。

（*除非有人使用Opera 8或Safari 3.0登陆您的页面，否则可能不太可能）。

对于jQuery，它遵循支持这一点的DOMContentLoaded，但在其他情况下又回到了检测DOM就绪的历史方法，这涉及重复检查DOM树以查看是否存在document.body。所以你可以使用它的DOM-ready处理程序：

$(function() {

无需使用on()。

有关jQuery如何做到的更多信息in this answer。

Answer 2

IE9及更高版本本身支持

DOMContentLoaded，可以通过W3C标准addEventListener方法附加，该方法也在IE9中实现：

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

这适用于所有现代浏览器和版本9及以上版本的IE。

jQuery 1.x与IE6 +和任何其他更新至今的浏览器兼容。 jQuery可以通过DOM ready handler填补对IE6-8的支持来挂钩DOM就绪事件跨浏览器：

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

.on()提供event delegation，但这与此问题无关。

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

2 个答案: