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

【问题标题】：Should i assign JavaScript events directly just to unify code?我应该直接分配 JavaScript 事件来统一代码吗？
【发布时间】：2010-12-02 22:16:40
【问题描述】：

我是不是通过分配事件处理程序（例如：

element.someEvent = someFunction;

代替：

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

这个想法有什么优缺点？
不只是测试和选择正确的方法，我错过了什么或设置自己的目标是什么？

【问题讨论】：

感谢所有关于 jAuery 的意见 :)

标签： javascript internet-explorer

【解决方案1】：

如果您使用element.onclick = xxx; 样式，您将自己（以及您在页面上使用的任何其他脚本）限制为该元素（任何该事件的前一个处理程序被重击）。使用addEventListener / attachEvent 机制，您可以相互独立地附加和删除事件处理程序，而不会产生串扰。

例如，如果你这样做：

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

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

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

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

创建一个为您解决这些问题的函数很容易：

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 这样的库很有用。

【讨论】：

是的，但我做不到，element.onclick = function(){};并在匿名函数中做任何我想做的事？
@Babiker：是的，你可以——而且你可以在元素上使用任何先前的事件处理程序。
但是，在一个足够简单的 Web 应用程序中，单个事件处理程序可能完全可以接受。 正确的解决方案取决于应用程序的需求。
即使事件处理程序是不同的类型？
@Babiker，不，它只会破坏同一元素上同一类型的处理程序。问题是当你的代码变大/你开始使用其他人的代码时，你没有意识到已经附加了一个处理程序。

【解决方案2】：

如果您可以完全控制页面，并且确定所有事件绑定都发生在一个地方，那么 .onevent 是最简单和最受支持的方式。

如果您担心覆盖以前的事件处理程序，您可以随时这样做：

var oldOnclick = el.onclick;
el.onclick = function () {
   // blah blah
   if (oldOnclick) oldOnclick();
};

【讨论】：

【解决方案3】：

在IE中，你需要使用attachEvent。（标准的 DOM 机制是 addEventListener。）我强烈建议使用像 jQuery 这样的库来为您处理这些浏览器差异。像 jQuery 这样的框架还负责消除不同浏览器中事件模型之间的差异。

【讨论】：

@James Kovacs，哦，相信我，我是初学者，我长期从事这项工作，我不会使用 jQuery 来挽救我的生命：D
@Babiker：如果您对 jQuery 有疑问，请注意，但请查看您的其他选项（我给了您一个列表，以及一个更长的链接）。有很多特定于浏览器的解决方法和其他人已经遇到、调试和解决的其他“陷阱”。利用这项工作而不是重复它符合您的最大利益。
@Babiker 不知道为什么作为一个初学者/从长远来看会让你这么说。这取决于你想做什么。如果您的目标是构建功能性网站，那么 jQuery 更实用，可以让您专注于实际构建您的功能。
@Babiker：“我宁愿努力学习纯 JavaScript” 绝对！很高兴听到它。但这与学习 JavaScript 的来龙去脉无关，JavaScript 是一门很棒的丰富语言，非常值得学习它的来龙去脉。这是关于处理我们称之为网络浏览器的一群野猫，以及它们如何解释（或忽略）围绕 DOM 和事件的规范并发明自己的做事方式。坦率地说，了解他们的错误/问题/peccadillos 是浪费时间，您可以花时间做一些有用的事情...... （继续）
@Babiker 我不想一直在同一点上跳动，如果您真的想深入研究所有 DOM 差异，这很公平，但请记住，您正在学习的是 BROWSER DOM差异，而不是“纯 javascript”，特别是如果您考虑完全脱离 DOM 的服务器端 javascript。就我个人而言，我认为 jQuery（和其他库，概念翻译得很好）比浏览器怪癖已经或将要教会我更多关于 JS 语言的更好的部分。只是我的 2 美分 :)

【解决方案4】：

现在有许多 javascript 库可以为您解决跨浏览器的兼容性问题，也可以让 javascript 编码变得有趣。最受欢迎的之一是Jquery。

您可以像这样使用 Jquery 注册事件：

$(elem).click(函数 () { alert('事件处理程序'); }); 或者 $(elem).bind('click', function() { alert('事件处理程序'); });

【讨论】：