Question

使用addEventListner和Onclick / Ondblclick调用函数有什么区别？

Answer 1

onclick等是DOM Level 0事件。它们适用于每个浏览器，但它们不允许您轻松地将多个处理程序添加到同一元素中的同一事件中。这意味着使用像

这样的东西

window.onload = function () {
    // THE CODE TO RUN
};

将删除已存在的任何函数，因此您必须使用以下技巧：

(function (oldonload) {
    window.onload = function () {
        // THE CODE TO RUN
        oldonload();
    };
}(window.onload));

使用addEventListener，您不必这样做。你只需写：

window.addEventListener("load", function () {
    // THE CODE TO RUN
}, false);

它只是工作......但不是在IE上！在IE上，您必须使用attachEvent，而除了 IE之外，它不会在任何地方工作。所以你仍然需要写这样的代码：

function yourCode () {
    // THE CODE TO RUN
}
if (window.addEventListener) {  
    window.addEventListener('load', yourCode, false);
} else {
    window.attachEvent('onload', yourCode);
}

在所有情况下，您还必须检查文档是否已经加载，这样您只需立即运行代码，而不是将其绑定到已经发生的事件，而不会再发生 - 这意味着更多代码：

function yourCode () {
    // THE CODE TO RUN
}
if(document.loaded) {
    yourCode();
} else {
    if (window.addEventListener) {  
        window.addEventListener('load', yourCode, false);
    } else {
        window.attachEvent('onload', yourCode);
    }
}

关键是，如果您希望事件处理代码能够健壮并且与所有浏览器兼容，那么它很快就变得非常复杂。这就是为什么我总是建议使用像jQuery这样的库来为你解决这个问题，所以你不必担心这些细节，只需写下：

$('some-id').click(function () {
    // THE CODE TO RUN
});

它神奇地适用于每个浏览器。

Answer 2

addEventListener允许您添加多个侦听器。

Answer 3

当您在节点上直接添加onclick / onmouseover时，您会将结构/数据与行为结合起来，这一点并不好，特别是如果您关心能够维护代码。

通过解耦它们（使用addEventListener），您：（a）能够独立于JS对HTML进行增量更改（反之亦然），（b）能够在不同的HTML上重用相同的JS （比如在另一页上），（c）能够单独缓存JS（假设你将它放在外部文件中），从而提高了整体性能。

除此之外（如@JohnPick回答），它允许您向同一节点添加多个侦听器。

使用addEventListner和Onclick / Ondblclick调用一个函数有什么区别？

3 个答案: