Ich sehe zwei Möglichkeiten, um Ereignisse in JavaScript zu setzen:
Fügen Sie ein Ereignis direkt innerhalb des Tags wie folgt hinzu:
<a href="" onclick="doFoo()">do foo</a>
Setze sie wie folgt mit JavaScript:
<a id="bar" href="">do bar</a>
und fügen Sie ein Ereignis in einem Abschnitt <script> innerhalb des Abschnitts <head> oder in einer externen JavaScript-Datei hinzu, z. B. wenn Sie prototypeJS :
Ich denke, die erste Methode ist leichter zu lesen und zu warten (weil die JavaScript-Aktion direkt an den Link gebunden ist), aber sie ist nicht so sauber (weil Benutzer auf den Link klicken können, selbst wenn die Seite nicht vollständig geladen ist) verursachen in einigen Fällen JavaScript-Fehler).
Die zweite Methode ist sauberer (Aktionen werden hinzugefügt, wenn die Seite vollständig geladen ist), aber es ist schwieriger zu wissen, dass eine Aktion mit dem Tag verknüpft ist.
Welche Methode ist die beste?
Eine killer Antwort wird voll und ganz geschätzt!
Nach meiner Erfahrung gibt es zwei wichtige Punkte:
1) Das Wichtigste ist, konsequent zu sein. Ich glaube nicht, dass eine der beiden Methoden unbedingt einfacher zu lesen ist, solange Sie sich daran halten. Ich bin nur verwirrt, wenn beide Methoden in einem Projekt verwendet werden (oder schlimmer noch auf der gleichen Seite), weil ich dann nach den Aufrufen suchen muss und nicht sofort weiß, wo ich suchen muss.
2) Die zweite Art, d.h. Event.observe() hat Vorteile, wenn dieselbe oder eine sehr ähnliche Aktion für mehrere Ereignisse ausgeführt wird, da dies offensichtlich wird, wenn sich alle diese Aufrufe an der gleichen Stelle befinden. Konrad hat darauf hingewiesen, dass dies in einigen Fällen mit einem einzigen Anruf erledigt werden kann.
Ich denke, die erste Methode ist leichter zu lesen und zu pflegen
Ich habe das Gegenteil gefunden, um wahr zu sein. Denken Sie daran, dass manchmal mehr als ein Ereignishandler an ein bestimmtes Steuerelement gebunden ist.
Durch die Angabe aller Ereignisse an einem zentralen Ort können die auf der Website stattfindenden Aktionen organisiert werden. Wenn Sie etwas ändern müssen, müssen Sie nicht nach allen Orten suchen, die eine Funktion aufrufen, Sie müssen sie nur an einer Stelle ändern. Wenn Sie weitere Elemente hinzufügen, die dieselbe Funktionalität haben sollten, müssen Sie nicht daran denken, ihnen die Handler hinzuzufügen. Stattdessen reicht es oft aus, dass sie eine Klasse deklarieren oder überhaupt nicht ändern, da sie logisch zu einem Containerelement gehören, von dem alle untergeordneten Elemente mit einer Aktion verknüpft werden. Aus einem tatsächlichen Code:
%Vor%Damit 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 getrennt sortierbar zu machen.
Ich glaube, dass die zweite Methode im Allgemeinen bevorzugt wird, weil sie Informationen über Aktionen (d. h. das JavaScript) getrennt vom Markup auf dieselbe Weise speichert, wie CSS die Präsentation von 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 viel bessere IDE-Unterstützung finden, wenn Sie das Mischen von HTML und Javascript auf ein Minimum beschränken.
Dieser Ansatz kommt wirklich zur Geltung, wenn Ihr Projekt wächst, und Sie möchten, dass Sie dasselbe Javascript-Ereignis an eine Reihe verschiedener Elementtypen auf vielen verschiedenen Seiten anhängen. In diesem Fall wird es viel einfacher, ein einzelnes Tempo zu haben, das 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 in IE) / attachEvent (in IE) verwenden.
Besuche: Ссылка
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 entfernt werden können.
Wenn Sie eine beträchtliche Menge an Javascript verwenden, kann es im Allgemeinen nützlich sein, Ihr JavaScript im Gegensatz zu Ihrem HTML lesbar zu machen. Man könnte also sagen, dass onclick=X im HTML sehr klar ist, aber dies ist sowohl eine fehlende Trennung des Codes - eine weitere syntaktische Abhängigkeit zwischen Stücken - als auch ein Fall, in dem man sowohl das HTML als auch das Javascript lesen muss um das dynamische Verhalten der Seite zu verstehen.
Meine persönliche Präferenz besteht darin, jQuery in externen js-Dateien zu verwenden, damit die js vollständig vom HTML getrennt ist. Javascript sollte unaufdringlich sein, so dass Inline (dh das erste Beispiel) meiner Meinung nach nicht die beste Wahl ist. Wenn Sie sich das HTML ansehen, sollte das einzige Zeichen, dass Sie js verwenden, das Skript sein, das in den Kopf eingefügt wird.
Ein Beispiel für das Hinzufügen (und Behandeln) von Ereignissen könnte in etwa so aussehen
%Vor%Ich denke, dass dieser Ansatz nützlich ist, wenn Sie alle Ihre js organisiert halten möchten, da Sie bestimmte Objekte für Aufgaben verwenden können und alles schön enthalten ist.
Natürlich ist der große Vorteil, jQuery (oder eine andere wohlbekannte Bibliothek) die harte Arbeit machen zu lassen, dass die browserübergreifende Unterstützung (weitgehend) dafür sorgt, dass das Leben viel einfacher wird
Bibliotheken wie YUI und jQuery bieten Methoden zum Hinzufügen von Ereignissen erst, wenn das DOM bereit ist. Dies kann vor window.onload geschehen. Sie stellen außerdem sicher, dass Sie mehrere Ereignisbehandlungsroutinen hinzufügen können, sodass Sie Skripts aus verschiedenen Quellen verwenden können, ohne dass sich die verschiedenen Ereignisbehandlungsroutinen gegenseitig überschreiben.
Ihre praktischen Entscheidungen sind also;
Eins. Wenn Ihr Skript einfach und das einzige ist, das jemals auf der Seite ausgeführt wird, erstellen Sie eine Init-Funktion wie folgt:
%Vor% Zwei. Wenn Sie über viele Skripts verfügen oder beabsichtigen, Skripts aus verschiedenen Quellen zu mashen, verwenden Sie eine Bibliothek und ihre onDOMReady -Methode, um Ihre Ereignisbehandlungsroutinen sicher hinzuzufügen
Tags und Links javascript html events event-binding