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

本文介绍了我应该直接分配JavaScript事件来统一代码吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的编程很糟糕，或者通过以下的assigne事件处理程序向IE过度弯曲：

Am I programming poorly or bending backwards too much for IE by assigne event handlers like:

element.someEvent = someFunction;

而不是：

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

• 这个想法有什么缺点和优点？
• 我不仅仅是通过测试和选择正确的方法而错过了什么或自我设定？
推荐答案

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

If you use the element.onclick = xxx; style, you're limiting yourself (and any other scripts you're using on the page) to a single event handler for the event on that element (any previous handler for that event gets bludgeoned). With the addEventListener / attachEvent mechanism, you can attach and remove event handlers independently of one another, without cross-talk.

例如，如果你这样做：

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

...然后任何以前的点击处理程序元素 foo 被点燃后，点击 foo 时不再调用。相比之下：

...then any previous click handler on element foo gets blown away and no longer called when foo is clicked. In contrast:

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

现在你的点击处理程序被调用，但是任何其他 点击之前已附加到 元素的处理程序也会被调用。你和别人玩的很好。 ： - ）

Now your click handler gets called, but any other click handlers that have previously been attached to the element also get called. You're playing nicely with others. :-)

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

It's easy to create a function that irons these things out for you:

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

...或者如果你真的想要去镇上：

...or if you really want to go to town:

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

...创建一个检测一次什么样的处理程序的函数使用然后在整个过程中使用它。

...which creates a function that detects once what kind of handler to use and then uses that throughout.

坦率地说，对于这些东西，利用其他人的工作并使用像 jQuery ，原型， YUI ，关闭，或其他几个人。

Frankly, though, for this stuff it's useful to leverage the work of others and use a library like jQuery, Prototype, YUI, Closure, or any of several others.