以编程方式设置事件 [英] setting events programmatically

问题描述

我在我的代码中设置表行的className，是否可以做一些类似于在行上设置事件的东西？这与我想要做的一致：

I am setting the className of a table row in my code, is it possible to do something similiar to set an event on a row? This is along the lines of what I would like to do :

for (var i = 1; i < numRows; i++) {
            var ID = table.rows[i].id;
            if (i % 2 == 0) {
                table.rows[i].className = "GridRow";
                table.rows[i].onmouseout = "GridRow";
            }
            else {
                table.rows[i].className = "GridRowAlt";
                table.rows[i].onmouseout = "GridRowAlt";
            }
        }

推荐答案

是，你可以通过以下方式为事件处理程序分配一个函数实例：

Yes, you can assign a function instance to the event handler that way:

table.rows[i].onmouseout = function() { ... };

在循环中小心这样做，因为你在每个循环和函数上创建一个新函数关闭范围内的数据（因此具有持久引用，而不是创建函数时的副本;请参阅这个最近的另一个问题了解更多）。但不要担心，关闭并不复杂一旦你理解它们是如何工作的。

Be careful doing that in loops, because you're creating a new function on every loop and the function closes over the data in scope (and so has an enduring reference to it, not a copy of it as of when the function was created; see this other recent question for more). But don't worry, closures are not complicated once you understand how they work.

一般来说，这称为DOM0事件处理，因为它涉及一种附加在第一个DOM之前创建的事件处理程序的方法规格。从DOM2开始，有一种更好的方法 addEventListener ：

In general, this is called "DOM0" event handling because it involves a method of attaching event handlers that was created prior to the first DOM specification. As of DOM2, there's a better way addEventListener:

table.rows[i].addEventListener('mouseout',function() { ... }, false);

这是更好，因为你可以在同一个元素的同一个事件上有多个事件处理程序而使用DOM0机制，分配一个新的事件处理程序将断开前一个（如果有的话）。

It's "better" because you can have more than one event handler on the same event of the same element, whereas with the DOM0 mechanism, assigning a new event handler disconnects the previous one (if any).

在IE9之前的IE上，遗憾的是，不支持addEventListener ，但确实非常相似 attachEvent ：

On IE prior to IE9, sadly, addEventListener wasn't supported but it did have the very similar attachEvent:

table.rows[i].attachEvent('onmouseout',function() { ... });

注意差异：

• addEventListener 的事件名称没有on前缀


• addEventListener 还有一个小于 attachEvent 的参数，你几乎总想设置 false

• addEventListener's event names don't have the "on" prefix
• addEventListener has one more param than attachEvent, which you almost always want to set false

更新：

上面的所有例子都是内联匿名函数，这有点像我，因为我不喜欢匿名函数。因此，为了清楚起见，从事件的角度来看，函数是一个函数。它可以是你在别处声明的命名函数，也可以是内联匿名函数，无论如何：

All of the examples above are for inline anonymous functions, which is a bit unlike me, because I don't like anonymous functions. So just for clarity, from an events perspective, a function is a function. It can be a named function you declare elsewhere, or an inline anonymous function, whatever:

// Hook up...
table.rows[i].addEventListener('mouseout', handleRowMouseOut, false);

// Nice, reusable function defined elsewhere
function handleRowMouseOut(event) {
    // ...
}

---

非主题：这些浏览器的差异导致我一般建议使用像 jQuery 这样的库，原型， YUI ，关闭，或任何其他几个人。它们可以为您平衡差异，并提供许多方便的实用功能。

---

Off-topic: It's these sorts of browser differences that lead me to geneerally recommend using a library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over differences for you as well as providing lots of handy utility functions.

这篇关于以编程方式设置事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！