javascript - 我应该直接分配 JavaScript 事件来统一代码吗？

Question

我的编程是否很差，或者通过分配事件处理程序对 IE 向后弯曲太多，例如:

element.someEvent = someFunction; 

而不是:

element.attachEventListener("someEvent", someFunction, false);

• 这个想法有哪些缺点和优点？
• 如果不测试和选择正确的方法，我会错过什么或让自己陷入什么境地？

Answer 1

如果您使用 element.onclick = xxx; 样式，则您将自己(以及您在页面上使用的任何其他脚本)限制为单个该元素上的事件的事件处理程序(该事件的任何先前处理程序都会受到攻击)。通过 addEventListener/attachEvent 机制，您可以独立地附加和删除事件处理程序，而不会发生串扰。

例如，如果您这样做:

 document.getElementById('foo').onclick = function() {
 };

...然后元素 foo 上任何先前的 click 处理程序都会被吹走，并且在单击 foo 时不再被调用。相比之下:

 document.getElementById('foo').addEventListener('click', function() {
 });

现在您的 click 处理程序被调用，但之前附加到该元素的任何其他 click 处理程序也 em> 被叫到。你和别人相处得很好。 :-)

创建一个函数来解决这些问题很容易:

function hookEvent(element, eventName, handler) {
    if (element.attachEvent) {
        element.attachEvent("on" + eventName, handler);
    }
    else if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else {
        element["on" + eventName] = handler;
    }
}

...或者如果您真的想去城里:

var hookEvent = (function() {

    function hookViaAttach(element, eventName, handler) {
        element.attachEvent("on" + eventName, handler);
    }
    function hookViaAdd(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }
    function hookDOM0(element, eventName, handler) {
        element["on" + eventName] = handler;
    }

    if (document.attachEvent) {
        return hookViaAttach;
    }
    if (document.addEventListener) {
        return hookViaAdd;
    }
    return hookDOM0;
})();

...它创建一个函数，该函数检测一次要使用哪种类型的处理程序，然后在整个过程中使用它。

坦率地说，对于这些东西，利用其他人的工作并使用像 jQuery 这样的库是很有用的。 , Prototype , YUI , Closure ，或any of several others .