Jaka jest różnica między on ("click", function()) i onclick = "function();"?

Question

Więc jeśli chcę coś się wydarzy, gdy kliknę przycisk I można albo zrobić:

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

czy mogę zrobić

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

Albo oczywiście wszelkich odmianach (na change, na hover) i Skróty (.click().change()) są możliwe ...

Poza tym, że A jest krótszy, jakie są różnice? Który jest lepszy i dlaczego?

Zauważyłem, że gdy używam .html() dynamicznie dodać element na stronie (jak przycisk) B nie działa w tym nowo utworzonego przycisku, i trzeba użyć ...

Wszelkie spostrzeżenia byłyby pomocne!

Answer 1

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

W ten sposób obsługiwane są zdarzenia inline. Głównym powodem jest to zły pomysł jest, aby jasno określić separation of concerns.

HTML - Structure of your page 

JS - Your page functionality 

To spowoduje mniej problemów utrzymania w dłuższej perspektywie i przy wadze systemowych w rozmiarze.

Co się stanie, jeśli na stronie znajduje się 100 przycisków i chcesz usunąć zdarzenie kliknięcia lub zmienić je dla wszystkich z nich. To zdecydowanie byłby koszmar. Zdefiniowanie pojedynczego zdarzenia można zdefiniować tylko w przypadku powiązania go w linii.

Po przeniesieniu się do oddzielnego pliku masz dużą elastyczność i możesz po prostu wprowadzić niewielką zmianę, która wpłynie na wszystkie elementy na stronie.

Tak więc drugie podejście jest zawsze lepsze. i do zrobienia.

Poprzez zdefiniowanie zdarzeń jak poniżej

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

ty HTML wygląda czysto sans jakiejkolwiek funkcjonalności i usuwa szczelne sprzęgło.

W przypadkach, w których dodano dynamicznie, faktyczne zdarzenia zawsze działają, ale istnieje pojęcie o nazwie Delegowanie zdarzeń. Dołączasz wydarzenie do kontenera nadrzędnego, który jest zawsze obecny na stronie i wiąże to wydarzenie. Gdy zdarzenie wystąpi później w elemencie, bańka zdarzenia do rodzica, który obsługuje wydarzenie dla Ciebie.

Dla takich przypadków wiążą wydarzenia za pomocą .on przechodzącą w selektora

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

pamiętać, że wiązanie wiele zdarzeń do dokumentu jest złym pomysłem. Zawsze możesz użyć closestStaticAncestor, aby powiązać zdarzenia.

Answer 2

zgadywania to prawdziwe pytanie:

Zauważyłem, że podczas korzystania z .html(), aby dynamicznie dodać element do witryny (takiej jak przycisk) B nie działa na nowo stworzony przycisk, i trzeba użyć ...

Wystarczy użyć przełącznika w funkcji .on() i użyć klasy zamiast zduplikowane identyfikatory dla wielu elementów:

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

przycisk (i) - zmiana klasy (jeśli używasz identyfikatorów, tylko zostanie wybrany PIERWSZA):

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

ten sposób należy użyć .on() dołączyć obsługi zdarzeń do nowe elementy:

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

Answer 3

Th Pierwsze podejście pozwala tylko zarejestrować słuchacza z jednym kliknięciem, podczas gdy drugie podejście pozwala zarejestrować dowolną liczbę osób.

Jeśli chcesz, aby słyszałeś również kliknięcia dynamicznie dodawanych elementów, powinieneś użyć .on(). Oto niektóre kod, który demonstruje ten (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"); 
}); 

Uwaga, first listener i second listener jest drukowany tylko po kliknięciu na pierwszą cześć, natomiast nowa span dostaje dodane po kliknięciu na dowolny z zakresów.

Answer 4

Różnica w pracach, jeśli używasz click() można dodać kilka fn, ale jeśli używasz atrybut tylko jedna funkcja zostanie wykonana - ostatni

formacie 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')"); 

Jeśli mówimy o wydajności, w każdym razie bezpośrednio przy użyciu jest zawsze szybsze, ale przy użyciu atrybutu będzie można przypisać tylko jedną funkcję.

Try This

Reference