Question

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

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

Answer 1

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

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

小心在循环中执行此操作，因为您在每个循环上创建一个新函数，并且该函数关闭范围内的数据（因此具有持久引用，而不是副本从创建函数时开始;有关详细信息，请参阅this other recent question。但是不要担心，closures are not complicated一旦你了解它们是如何工作的。

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

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

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

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

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

请注意差异：

addEventListener的事件名称没有“on”前缀
addEventListener还有一个参数，而不是attachEvent，您几乎总想设置false

<强>更新：

上面的所有示例都是针对内联匿名函数的，这与我有点不同，因为I don't like anonymous functions。因此，为了清楚起见，从事件的角度来看，函数是一个函数。它可以是您在其他地方声明的命名函数，也可以是内联匿名函数，无论如何：

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

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

偏离主题：这些浏览器的差异导致我通常建议使用jQuery，Prototype，YUI，{{ 3}}，或Closure。它们可以为您平滑差异，并提供许多方便的实用功能。

Answer 2

table.rows[i].onmouseout = "GridRow";没有多大意义，table.rows[i].onmouseout = function(){alert('hello');};或其他一些有效的脚本应该有效。

Answer 3

为什么不使用jQuery或其他JavaScript框架？通过这种方式，您的代码变得更加简单。


var i = 0;

$('#some_table tr').each(function() {
  if (i % 2 == 0) {
    $(this).addClass('GridRow');
    $(this).mouseout(function(evt) { /* your GridRow function */ });
  } else {
    $(this).addClass('GridRowAlt');
    $(this).mouseout(function(evt) { /* your GridRowAlt function */ });
  }

  i++;
})

苏丹

Answer 4

最初的问题不是警告“GridRow”。我放弃确定GridRow是一个函数名。幸运的是，每个函数都是窗口的子函数，因此写入窗口[“GridRow”]。

我会添加一个众所周知的绑定事件函数，因为你经常需要它。

var bindEvent=function(elem,evt,func){
              if(elem.addEventListener){
                 elem.addEventListener(evt,func,false);
              }
              else if(elem.attachEvent){
                      elem.attachEvent('on'+evt,function(){
                          func.call(event.srcElement,event); 
                       })
             }
};

然后：

bindEvent(table.rows[i],"mouseout",window["GridRow"]);

以编程方式设置事件

4 个答案: