是什麼上（ 「點擊」，（）的函數）和的onclick =之間的區別 「功能（）;」？

Question

所以，如果我想，當我點擊一個按鈕，我會發生什麼或者做：

<!-- EXAMPLE A--> 
<input type="button" onclick="alert('hello world');"> 

或者我可以做

<!-- EXAMPLE B--> 
<input type="button" id="clickme"> 
<script> 
    $('#clickme').on("click",function(){alert('hello world');}); 
</script> 

課程或任何變化（上change，在hover）和快捷鍵（.click().change()）是可能的...

除了A較短的事實，有什麼區別？哪個更好？爲什麼？

我注意到，當我使用.html()一個元素動態添加到網站（如按鈕），B不爲這個新創建的按鈕工作，我需要使用一個...

任何見解將是有益的！

Answer 1

<input type="button" onclick="alert('hello world');"> 

這是如何處理內聯事件的方式。主要的原因，這是一個壞主意是明確界定separation of concerns.

HTML - Structure of your page 

JS - Your page functionality 

這將在長期內，當大小的系統規模導致較少的維護問題。

如果您的頁面上有100個按鈕，並且想要刪除單擊事件或爲所有這些按鈕進行更改，會發生什麼情況。這絕對是一場噩夢。 此外，如果將其綁定內聯，則只能定義一個事件。

通過移出一個單獨的文件，您有很大的靈活性，您可以做一個小的更改，這將影響頁面上的所有元素。

所以第二種方法總是比較好。和要走的路。

通過定義像下面

$('#clickme').on("click",function(){alert('hello world');}); 

你HTML事件看起來的任何功能幹淨SAN和刪除的緊耦合。

在你有一個動態添加的情況下，它是真正的內聯事件總是工作，但有一個叫事件代表團概念。將事件附加到始終存在於頁面上的父容器，並將事件綁定到該容器。當事件發生在元素的稍後時間時，事件會冒泡到爲您處理事件的父級。

對於這樣的情況下，你使用綁定經過.on在選擇

$(document).on('click', '#clickme', function() { 

記住多個事件綁定到一個文件是一個壞主意的事件。您始終可以使用closestStaticAncestor來綁定事件。

Answer 2

猜測這是你真正的問題：

我注意到，當我使用的.html（）來動態的元素添加到 網站（如按鈕），B不爲這個新工作創建按鈕， ，我需要使用一個...

在.on()功能只需使用選擇器，使用類代替重複的ID多個元素：

$('document').on("click", ".myButtons", function(){ 
    alert('hello world'); 
}); 

按鈕（S） - 改變類（如果你使用的ID，只有FIRST將被選中）：

<input type="button" class="myButtons" /> 
<input type="button" class="myButtons" /> 

這是你應該如何使用.on()將事件處理程序附加到新元素：

https://stackoverflow.com/a/14354091/584192

Answer 3

釷Ë第一種方法只允許您註冊一個點擊監聽器，而第二種方法可以讓你註冊，你想要的。

如果你想在動態地添加元素的點擊次數進行也聽說了，你應該使用.on()。下面是一些代碼，演示了這個（jsfiddle）：

HTML

<div id="mainDiv"> 
<span class="span1">hello</span> 
</div> 

JS

$(document).on("click", ".span1", function() { 
    $("#mainDiv").append("<span class=\"span1\">hello</span>"); 
}); 

$(".span1").click(function() { 
    console.log("first listener"); 
}); 

$(".span1").click(function() { 
    console.log("second listener"); 
}); 

注意first listener和second listener的第一聲問候一下時纔打印，而新span得到在任何跨度的點擊時添加。

Answer 4

在作品的差異，如果你使用點擊（），您可以添加多個FN，但如果您使用屬性只有一個函數將被執行的是 - 最後一個

HTML的

<span id="JQueryClick">Click #JQuery</span> </br> 
<span id="JQueryAttrClick">Click #Attr</span> </br> 

Js-

$('#JQueryClick').on("click", function(){alert('1')}); 
$('#JQueryClick').on("click", function(){alert('2')}); 

$('#JQueryAttrClick').attr('onClick'," alert('1')");//this doesn't work  
$('#JQueryAttrClick').attr('onClick'," alert('2')"); 

如果我們直接使用在談論性能，在任何情況下總是更快，但是使用屬性，你可以指定只有一個功能。

Try This

Reference