Was ist der beste Weg, ein Ereignis in JavaScript hinzuzufügen?

https://stackoverflow.com/questions/34126

09-06-2019
|

Frage

Ich sehe im Wesentlichen zwei Möglichkeiten, Ereignisse in JavaScript festzulegen:

Fügen Sie ein Ereignis wie folgt direkt in das Tag ein:

<a href="" onclick="doFoo()">do foo</a>
Legen Sie sie per JavaScript wie folgt fest:

<a id="bar" href="">do bar</a>

und fügen Sie ein Ereignis in a hinzu <script> Abschnitt innerhalb der <head> Abschnitt oder in einer externen JavaScript-Datei, wenn Sie diese verwenden PrototypJS:

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

Ich denke, die erste Methode ist einfacher zu lesen und zu warten (da die JavaScript-Aktion direkt an den Link gebunden ist), aber sie ist nicht so sauber (da Benutzer auf den Link klicken können, auch wenn die Seite nicht vollständig geladen ist, was zu JavaScript-Fehlern führen kann in manchen Fällen).

Die zweite Methode ist übersichtlicher (Aktionen werden hinzugefügt, wenn die Seite vollständig geladen ist), aber es ist schwieriger zu erkennen, ob eine Aktion mit dem Tag verknüpft ist.

Welche Methode ist die beste?

Eine Killer-Antwort wird uns voll und ganz freuen!

Lösung

Meiner Erfahrung nach gibt es dabei zwei wesentliche Punkte:

1) Das Wichtigste ist, konsequent zu sein.Ich glaube nicht, dass eine der beiden Methoden unbedingt einfacher zu lesen ist, solange man sich daran hält.Ich bin nur verwirrt, wenn beide Methoden in einem Projekt (oder noch schlimmer auf derselben Seite) verwendet werden, weil ich dann mit der Suche nach den Aufrufen beginnen muss und nicht sofort weiß, wo ich suchen soll.

2) Die zweite Art, d.h. Event.observe() hat Vorteile, wenn bei mehreren Ereignissen dieselbe oder eine sehr ähnliche Aktion ausgeführt wird, da dies deutlich wird, wenn alle diese Aufrufe am selben Ort erfolgen.Wie Konrad betonte, kann dies in manchen Fällen auch mit einem einzigen Anruf erledigt werden.

Andere Tipps

Ich denke, die erste Methode ist einfacher zu lesen und zu warten

Ich habe festgestellt, dass das Gegenteil der Fall ist.Bedenken Sie, dass manchmal mehr als ein Event-Handler an ein bestimmtes Steuerelement gebunden ist.

Die Deklaration aller Ereignisse an einem zentralen Ort hilft bei der Organisation der auf der Website stattfindenden Aktionen.Wenn Sie etwas ändern müssen, müssen Sie nicht nach allen Stellen suchen, an denen eine Funktion aufgerufen wird, sondern Sie müssen sie einfach an einer Stelle ändern.Wenn Sie weitere Elemente hinzufügen, die die gleiche Funktionalität haben sollen, müssen Sie nicht daran denken, ihnen die Handler hinzuzufügen;Stattdessen reicht es oft aus, sie eine Klasse deklarieren zu lassen oder sie gar nicht zu ändern, da sie logischerweise zu einem Containerelement gehören, dessen untergeordnete Elemente mit einer Aktion verbunden sind.Aus einem tatsächlichen Code:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

Dadurch wurde ein Ereignishandler mit allen Spaltenüberschriften in einer Tabelle verbunden, um die Tabelle sortierbar zu machen.Stellen Sie sich den Aufwand vor, alle Spaltenüberschriften separat sortierbar zu machen.

Ich glaube, dass die zweite Methode im Allgemeinen bevorzugt wird, weil sie Informationen über die Aktion speichert (d. h.das JavaScript) vom Markup auf die gleiche Weise trennen, wie CSS die Präsentation vom Markup trennt.

Ich stimme zu, dass es dadurch etwas schwieriger wird, zu sehen, was auf Ihrer Seite passiert, aber gute Tools wie Firebug werden Ihnen dabei sehr helfen.Sie werden auch eine viel bessere IDE-Unterstützung finden, wenn Sie die Vermischung von HTML und Javascript auf ein Minimum beschränken.

Dieser Ansatz kommt erst richtig zum Tragen, wenn Ihr Projekt wächst und Sie feststellen, dass Sie das gleiche Javascript-Ereignis an eine Reihe unterschiedlicher Elementtypen auf vielen verschiedenen Seiten anhängen möchten.In diesem Fall ist es viel einfacher, einen einzigen Schritt zu haben, der Ereignisse anhängt, anstatt viele verschiedene HTML-Dateien durchsuchen zu müssen, um herauszufinden, wo eine bestimmte Funktion aufgerufen wird.

Sie können auch addEventListener (nicht im IE) / attachmentEvent (im IE) verwenden.

Kasse: http://www.quirksmode.org/js/events_advanced.html

Damit können Sie eine Funktion (oder mehrere Funktionen) an ein Ereignis in einem vorhandenen DOM-Objekt anhängen.Sie haben auch den Vorteil, dass sie später wieder gelöst werden können.

Wenn Sie viel Javascript verwenden, kann es im Allgemeinen nützlich sein, Ihr eigenes zu erstellen Javascript lesbar, im Gegensatz zu Ihrem HTML.So könnte man das sagen onclick=X im HTML ist sehr klar, aber das ist sowohl ein Mangel an Trennung des Codes – eine weitere syntaktische Abhängigkeit zwischen Teilen – als auch ein Fall, in dem man sowohl den HTML- als auch den Javascript-Code lesen muss, um das dynamische Verhalten der Seite zu verstehen .

Meine persönliche Präferenz ist die Verwendung von jQuery in externen JS-Dateien, damit das JS vollständig vom HTML getrennt ist.Javascript sollte unauffällig sein, daher ist Inline (dh das erste Beispiel) meiner Meinung nach nicht wirklich die beste Wahl.Wenn Sie sich den HTML-Code ansehen, sollte das einzige Zeichen dafür, dass Sie js verwenden, die Skripteinbindungen im Kopf sein.

Ein Beispiel für das Anhängen (und Behandeln) von Ereignissen könnte etwa so aussehen

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

Ich denke, dieser Ansatz ist nützlich, wenn Sie alle Ihre JS organisiert halten möchten, da Sie bestimmte Objekte für Aufgaben verwenden können und alles gut enthalten ist.

Der große Vorteil, jQuery (oder eine andere bekannte Bibliothek) die harte Arbeit erledigen zu lassen, besteht natürlich darin, dass die browserübergreifende Unterstützung (größtenteils) gewährleistet ist, was das Leben viel einfacher macht

Bibliotheken wie YUI und jQuery bieten Methoden zum Hinzufügen von Ereignissen erst, wenn das DOM bereit ist, was vor window.onload erfolgen kann.Sie stellen außerdem sicher, dass Sie mehrere Event-Handler hinzufügen können, sodass Sie Skripte aus verschiedenen Quellen verwenden können, ohne dass sich die verschiedenen Event-Handler gegenseitig überschreiben.

Ihre praktischen Entscheidungen sind also:

Eins.Wenn Ihr Skript einfach ist und das einzige, das jemals auf der Seite ausgeführt wird, erstellen Sie eine Init-Funktion wie folgt:

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

Zwei.Wenn Sie viele Skripte haben oder planen, Skripte aus verschiedenen Quellen zu kombinieren, verwenden Sie eine Bibliothek und ihre onDOMReady Methode zum sicheren Hinzufügen Ihrer Event-Handler

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow