把onclick處理的代碼與在JS代碼

Question

說我有兩個按鈕，就像這樣：

<input type="button" id="button1" value="click me 1" /> 
<input type="button" id="button2" value="click me 2" /> 

將有什麼區別，除了代碼是不同的，把一個onclick屬性在其中一人的，並使用jQuery來處理其他？

HTML：

<input type="button" id="button1" value="click me 1" onclick="alert('Clicked button 1!');"/> 
<input type="button" id="button2" value="click me 2" /> 

JS/jQuery的：

$(document).ready(function() { 
    $("#button2").click(function(){ 
     alert("Clicked button 2!"); 
    }); 
}); 

Answer 1

他們完成同樣的事情，但也有一些差異：

• 當創建元素時，HTML中的事件綁定存在，而用jQuery綁定的事件稍後添加，當文檔完成時ading和ready事件被觸發。

• jQuery事件是多播的，也就是說，您可以將多個相同類型的事件綁定到同一個元素。

Answer 2

本質上，存在兩種控制的功能沒有任何差 - 它們都會執行相同的命令。

但是，如果結構正確，您的站點應該加載頁面的任何外部腳本（例如第二個示例）以減少加載時間。

基本上，儘管差異將是不明顯用一個小規模的網頁時，第一示例將導致在正生成的頁面要加載的函數調用，而第二應加載頁面完成後加載 - 意味着加載實際頁面的時間稍少一些。

編輯：

然而，在進一步的研究，似乎現代瀏覽器更能夠處理這個過程中，請參閱：Where should I put <script> tags in HTML markup?

Answer 3

那麼效果是一樣的。然而，還是有一些差異，如： 雖然點擊第一個按鈕時會觸發第一個事件，但內容在頁面加載後加載，第二個被觸發，當然點擊後內容每時每刻都會被初始化。