javascript - 使用 addEventListner 和简单地调用函数的 Onclick/Ondblclick 有什么区别？

Question

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

Answer 1

onclick 等是 DOM 级别 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);
}

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

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

它神奇地适用于所有浏览器。