添加事件監聽器的最佳實踐（javascript，html）

我知道我可能會在這裏請求月亮，但我正在尋找一些有經驗的意見，以最好的方式添加事件監聽器，或者更確切地說'When'或'Where'將它們添加到js文件中。添加事件監聽器的最佳實踐（javascript，html）

以我的看法爲例。我有有一堆，現在必須由性能在JS文件處理的onclick事件的頁面

如

var test = document.getElementById("i-am-element"); 
test.onclick = testEventListener;

我的問題是哪兒，我應該在js文件里加入。

我怎麼打算去它是有類似下面的

$(document).ready(function() { 
    var test = document.getElementById("test-me-shane"); 
    test.onclick = testEventListener; 

    //add all the functions to different elements 
}); 

myfunction1(){} 
myfunction2(){} 
myfunction3(){}

因此，一旦該文件已經準備好，然後纔將所有事件偵聽器添加。這是可以接受的嗎？還是有更普遍接受的方式來做到這一點。

注：我知道這個問題可能會出現主觀，所以我要與正確的答案將是你見過的最流行的方式看到事件監聽添加。我敢肯定，在這方面必須有多數人接受，如果事情類似於你應該聲明變量的地方，在開始時或者當你需要時，我會提前道歉。

In Java, should variables be declared at the top of a function, or as they're needed?

來源

2011-08-03 OVERTONE

不知道你會得到月亮，但研究有關事件代表團。 – Kumar

那麼如果這個問題不能得到回答，是否有正確的方法來做到這一點，也許有人可以讓我知道我的方式是錯的？ – OVERTONE

我寫了一篇關於事件代表團的博客文章，這是我自學的方式可能對你有所幫助，這裏是http://www.kumarchetan.com/blog/2010/10/03/event-delegation-save-你的網頁/， – Kumar

你真的希望能夠將所有的事件監聽器添加到同一個地方;爲什麼？只是爲了便於維護。

因此，放置所有事件偵聽器的最佳位置是在一個地方，您可以保證全部元素您可能想要綁定事件處理程序以使其可用。

這就是綁定你的事件處理程序中最常見的地方是DOMReady事件已觸發$(document).ready()後。

一如既往，有是規則的一些例外。非常偶爾，您可能希望儘快將事件處理程序綁定到元素;這是在元素的結束標記被定義之後。在這種情況下，後續的段應使用：

<div id="arbitrary-parent"> 
    <h1 id="arbitrary-element">I need an event handler bound to me <strong>immediately!</strong></h1> 
    <script>document.getElementById("arbitrary-element").onclick = function() { alert("clicked"); }</script> 
</div>

你應該考慮的另一件事是，你將如何綁定你的處理程序。如果你堅持：DOMElement.onclick = function() { };，你限制自己綁定每個事件的處理程序。

相反，後續的方法允許你綁定每個事件muliple處理程序：

function bind(el, evt, func) { 
    if (el.addEventListener){ 
     el.addEventListener(evt, func, false); 
    } else if (el.attachEvent) { 
     el.attachEvent('on' + evt, func); 
    } 
}

來源

2011-08-03 11:00:55 Matt

也許我應該在接受這個正確答案之前先看看處理程序是什麼。否則，這是現貨。 – OVERTONE

啊沒關係。我知道處理者是什麼人。只是不知道他們被稱爲：3 – OVERTONE

有爲什麼當你在HTML
<someTag id="i-am-an-element" onclick="functionToTheEventToExecute()"> </someTag>
我想是聲明元素，你不要簡單地指定相關聯的具體原因。

來源

2011-08-03 10:40:41

你不應該這樣綁定事件！ – Kumar

+11

「** Unobtrusive Javascript **」？ – Matt

顯然它算作嵌入式JavaScript，今天我只學習它。它要求將所有事件作爲JS文件中的屬性進行處理，而不是在HTML中進行處理。除此之外，我對onclick沒有任何問題。 – OVERTONE

添加事件監聽器的最佳實踐（javascript，html）

回答

相關問題