5

我需要编写一段代码，将侦听器附加到选定的事件，并且可以在任何流行的浏览器、任何版本的浏览器中工作。在做了一些搜索后，我得出了以下功能：

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 或更高版本，它会将事件名称从DOMContentLoadedto重写onreadystatechange（并补充其他事件名称with on, IE 需要)，如果是其他浏览器，事件名称是否会保持不变？

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

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

4

2 回答 2

5

IE9 支持 DOMContentLoaded。见这里。

考虑到这一点，您几乎可以*假设，如果addEventListener支持，则 DOMContentLoaded 也支持。

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

至于 jQuery，它遵循支持 DOMContentLoaded 的方法，但在其他方面回退到其检测 DOM 就绪的历史方法，这涉及反复检查 DOM 树以查看是否document.body存在。所以你可以只使用它的 DOM-ready 处理程序：

$(function() {

无需使用on().

有关 jQuery 如何在此答案中执行此操作的更多信息。

于 2012-07-17T11:13:01.970 回答
3

DOMContentLoaded在 IE9 及更高版本中原生支持，并且可以通过addEventListener也在 IE9 中实现的 W3C 标准方法附加：

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()提供事件委托，但这与问题无关。

于 2012-07-17T11:35:06.870 回答