以編程方式設置事件

我在代碼中設置錶行的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"; 
      } 
     }

來源

2011-04-21 user517406

是的，你可以一個函數實例分配給該事件處理方式：

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機制，分配一個新的事件處理程序斷開前一個（如果有的話）。

在IE之前IE9，可悲的是，addEventListener沒有得到支持，但它確實有非常相似attachEvent：

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

注意區別：

addEventListener的事件名稱沒有「開」字頭
addEventListener還有一個參數比attachEvent多，你差不多都是阿瓦YS要設置false

更新：

所有以上的例子是聯匿名函數，這是一個有點不像我，因爲。爲了清楚起見，從事件角度來看，函數是一個函數。它可以是你聲明的其他地方命名函數或內聯匿名函數，不論：

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

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

題外話：正是這些各種各樣的瀏覽器的差異，導致我geneerally建議使用像庫jQuery,Prototype,YUI,Closure或any of several others。他們爲你平滑分歧，並提供許多便利的實用功能。

來源

2011-04-21 14:07:47

table.rows[i].onmouseout = "GridRow";沒有什麼意義，table.rows[i].onmouseout = function(){alert('hello');};或其他有效的腳本應該工作。

來源

2011-04-21 14:07:53

放鬆，這是一個錯字。 – 2011-04-21 14:52:13

我道歉，我的Java，JavaScript和C++之間跳來跳去，使一些奇怪的混淆起來。 – 2011-04-21 15:28:24

:-)我們不是全部。（哦，C++，一定很好玩把*該*帽子上把它關閉，區別在內存中處理...） – 2011-04-21 15:31:48

爲什麼不使用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++; 
})

蘇丹

來源

2011-04-21 14:21:57 sultan

這對我來說看起來並不那麼簡單。（有很多的事情jQuery和類似* *做簡單做，當然。）附註：*每次*您調用'$（本）'，有多個函數調用和所需的內存分配。如果您發現自己在函數中多次寫入'$（this）'，請考慮一次並存儲結果。哦也，你不需要'i'變量，只是使用jQuery的傳遞到迭代函數索引：http://api.jquery.com/each/ – 2011-04-21 15:20:02

原來的問題是不打草驚蛇「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"]);

來源

2014-02-25 15:18:14

以編程方式設置事件

回答

相關問題