Was ist der Unterschied zwischen on("click",function () und onclick="Funktion();"?

Also, wenn ich will, dass etwas passiert, wenn ich auf eine Schaltfläche klicken kann ich entweder tun:

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

oder was ich tun kann

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

Oder natürlich auch alle Variationen (auf change auf hover) und Verknüpfungen (.click() .change()) möglich sind...

Neben der Tatsache, dass Eine kürzere, was sind die Unterschiede? Was ist besser und warum?

Mir ist aufgefallen, dass wenn ich .html() dynamisch hinzufügen eines Elements auf der Seite (wie eine Schaltfläche) B nicht für diese Arbeit neu erstellte Schaltfläche, und ich benötigen, um Ein...

Einblick wäre hilfreich!

InformationsquelleAutor olli | 2013-07-31
  1. 11
    <input type="button" onclick="alert('hello world');">

    Dies ist die Art und Weise, wie inline-Ereignisse behandelt werden. Der Hauptgrund, warum dies eine schlechte Idee ist, klar zu definieren, die separation of concerns.

    HTML - Structure of your page

JS   - Your page functionality

    Dies wird dazu führen, dass weniger Probleme bei der Wartung auf lange Sicht und wenn das system skaliert in der Größe.

    Was passiert, wenn Sie 100 buttons auf Ihrer Seite und Sie möchten, entfernen Sie das click-Ereignis oder ändern Sie es für alle von Ihnen. Auf jeden Fall wäre es ein Alptraum.
    Auch können Sie definieren Sie nur ein einziges Ereignis, wenn Sie binden ihn.

    Durch den Umzug aus einer separaten Datei haben Sie viel Flexibilität und Sie können nur eine kleine änderung, die Auswirkungen auf alle Elemente auf der Seite.

    , So dass der 2. Ansatz ist immer besser. und der Weg zu gehen.

    Durch die Definition der Ereignisse, wie unten

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

    du HTML sauber aussieht sans Funktionalität und entfernt die enge Kopplung.

    In den Fällen, die Sie haben eine dynamisch Hinzugefügt, es ist wahr, inline-events immer arbeiten, aber es gibt ein Konzept namens " Event Delegation . Befestigen Sie die Veranstaltung zu einem übergeordneten container, der ist immer auf der Seite und binden Sie das Ereignis, um es. Wenn das Ereignis tritt zu einem späteren Zeitpunkt auf das element , das Ereignis Blasen an den Elternteil, der das Ereignis übernimmt für Sie.

    Für solche Fälle binden Sie die Ereignisse, die mit .on übergeben Sie in Selektor

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

    Beachten Sie, dass die Bindung mehrerer Ereignisse zu einem Dokument ist eine schlechte Idee. Sie können immer die closestStaticAncestor binden die Ereignisse.

    • Eine vollständige, gut geschrieben Antwort - bravo.
    InformationsquelleAutor Sushanth --
  2. 1

    Den ersten Ansatz können Sie nur registrieren, ein Klick-listener, während der zweite Ansatz können Sie registrieren, wie viele, wie Sie wollen.

    Wenn Sie möchten, klickt auf dynamisch hinzugefügte Elemente werden ebenfalls zu hören, sollten Sie .auf(). Hier ist etwas code, der veranschaulicht dies (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" );
});

    Beachten Sie, dass first listener und second listener wird nur gedruckt, wenn Sie auf den ersten Hallo, in der Erwägung, dass eine neue span Hinzugefügt wird, wenn ein Klick auf einen beliebigen Spannweiten.

    • Warum nach unten Stimmen?
    • Haha. Ich habe gehört, der Antwort-Poster downvoting andere beantwortet aber nicht die Frage, Fragesteller! Naja.
    • Hey ich downvoted nur die eine Antwort hatte nichts zu tun mit meiner Frage. Alle anderen, die ich von Ihnen positiv bewertet werden!
    • Cool! 🙂
    InformationsquelleAutor go-oleg
  3. 0

    Vermute, dass dies ist Ihre eigentliche Frage:

    Mir ist aufgefallen, dass wenn ich Sie benutze .html() dynamisch hinzufügen eines Elements zu
    die Seite (wie eine Schaltfläche) B nicht für diese Arbeit neu erstellte Schaltfläche,
    und ich muss an Eine...

    Verwenden Sie einfach den Wahlschalter in die .on() Funktion, UND VERWENDEN Sie EINE KLASSE statt DOPPELTE IDs für mehrere Elemente:

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

    Taste(N) - änderung der Klasse (wenn Sie IDs, nur die ERSTEN ausgewählt werden):

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

    Dies ist, wie Sie verwenden sollten .on() anfügen von Ereignishandlern, um neue Elemente:

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

    • Sie "raten" die einzige Frage ist in Bezug auf die Delegierten, es sind noch 2 Fragen über seine Delegierten-und Verlustrechnung, die Fett hervorgehoben sind. Lesen Sie die Frage und beantworten Sie Sie vollständig anstelle von Fischen für den guten Ruf, indem Sie versuchen, um die Schnellste Antworten auf die einfachsten Fragen die Sie finden können.
    InformationsquelleAutor Samuel Liew
  4. -1

    Unterschied in den Werken, wenn Sie verwenden, klicken Sie auf() können Sie mehrere fn, aber wenn Sie mit einem Attribut nur eine Funktion ausgeführt werden - das Letzte

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

    Wenn wir reden über die Leistung, die in jedem Fall direkt mit ist immer schneller, aber die Verwendung von Attribut können Sie nur zuweisen einer Funktion.

    Versuchen Sie, Diese

    Referenz

    • Sie überschreiben das Attribut... Versuchen $('#JQueryAttrClick').attr('onClick'," alert('2');alert('3');" ); Aber es hat mir geholfen, in meinem Kontext. Danke...
    InformationsquelleAutor Ishan Jain
Schreibe einen Kommentar