一种附加事件侦听器的方法，所有主要的web浏览器都支持

A method of attaching event listener, supported by all major web browsers

本文关键字：所有主 方法 web 支持 浏览器 侦听器 一种 事件      更新时间：2023-11-01

我需要写一段代码，将侦听器附加到所选事件，并且可以在任何流行的浏览器中，在任何版本中工作

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。在InternetExplorer9之前，解决这个问题似乎也相当简单。你只需要在else if(window.attachEvent):中多写一行

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

在任何版本的Internet Explorer中都会触发此部分，这一行提供了事件名称的简单翻译，因此始终使用正确的名称。

但是InternetExplorer9（及以上版本）呢？其中微软决定放弃attachEvent而选择addEventListener。但未将onreadystatechange改为DOMContentLoaded。

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

那么，解决这个问题的唯一方法是在window.addEventListener部分添加浏览器检测（类型和版本）吗？如果它检测到脚本处理的是IE 9或更高版本，它会将事件名称从DOMContentLoaded重写为onreadystatechange（并用on补充其他事件名称，这是IE所必需的），如果是其他浏览器，会保持事件名称不变吗？

也许我错了，因为正如我刚刚测试的那样，我的IE 8中既没有DOMContentLoaded也没有onreadystatechange（第一个在Firefox/Chrome中正确启动）。

那么jQuery的.on()函数（或类似函数）呢？有人知道吗，如果它支持DOMContentLoaded的跨浏览器附加，所以我可以确定，无论我在哪个浏览器或它的版本中使用，这种特定类型的事件都会被我的脚本捕获？

IE9支持DOMContentLoaded。请参见此处。

考虑到这一点，您可以假设，如果支持addEventListener，那么DOMContentLoaded也支持。

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

至于jQuery，它遵循支持它的DOMContentLoaded，但在其他方面，它又回到了检测DOM就绪的历史方法，即反复检查DOM树以查看document.body是否存在。因此，您可以使用其DOM就绪处理程序：

$(function() {

而不必使用CCD_ 22。

关于jQuery如何做到这一点的更多信息，请参阅此答案。

DOMContentLoaded在IE9及以上版本中本机支持，并且可以通过W3C标准addEventListener方法附加，该方法也在IE9:中实现

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

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

jQuery1.x与IE6+和任何其他最新浏览器兼容。jQuery可以通过DOM就绪处理程序来填充对IE6-8的支持，从而在跨浏览器中挂接DOM就绪事件

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

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

相关文章：