Die Ausführung der JavaScript -Skriptsprache muss ausgelöst werden. Der allgemeine Ansatz besteht darin, mehrere Funktionen direkt auf der Webseite zu schreiben. Einige von ihnen werden vom Browser verarbeitet, wenn der Code geladen wird, oder verwenden Codes ähnlich wie folgt, um die Implementierung der mit der Funktion bezogenen Funktionen auszulösen.
<div id = ”link” onclick = ”Fun ()”> </div>
Der obige Code bedeutet, dass, wenn die Maus auf ein Element mit ID als Link klickt, das Onclick -Ereignis ausgelöst wird und die unter Verwendung von JavaScript definierte Spaßfunktion ausgeführt wird. Dieser Ansatz ist definitiv unangemessen, da die Triggeroperation direkt in die HTML -Struktur geschrieben ist und der Inhalt und das Verhalten nicht isoliert sind, was für die zukünftige sekundäre Entwicklung oder Änderungen zu Unannehmlichkeiten führt.
Es ist zu beachten, dass bei der Verarbeitung der Ereignisverarbeitung an das entsprechende Element gebunden ist, Operationen erst nach dem Laden dieses Elements durchgeführt werden können. Wenn das verarbeitete Skript im Kopfbereich platziert ist, meldet der Browser einen Fehler. Da das folgende HTML -Element noch nicht geladen wurde, wurde das Verarbeitungsskript im Kopf verarbeitet.
Ein guter Weg, um den JavaScript -Code auszuführen, sollte darin bestehen, Verhaltensinhalte zu trennen und nach dem Laden von Seite zu verarbeiten. Daher müssen wir beim Umgang mit JavaScript -Code die Ladeereignisse von Hörern und Fensterobjekten verwenden.
Hörer
Die tatsächliche Funktion des Hörers besteht darin, das Verhalten von Inhalten zu trennen. In der Vergangenheit wurden einige auslösende Ereignisse benötigt, um JavaScript -bezogene Funktionen auszulösen. Jetzt verwenden wir direkt einen Hörer für ein Element in JavaScript, um auf Ereignisse dieses Elements zu hören. Wenn dieses Element ausgelöst und die entsprechende Verarbeitungsfunktion für dieses Ereignis im Hörer definiert wird, wird diese Funktion verarbeitet.
Die Standardmethode von W3C heißt AddEventListener, das von IE9, Chrome, Firefox und Opera unterstützt wird. Die Schreibmethode lautet:
window.addeventListener ('laden', Funktion, falsch);Die Anhang -Methode im frühen IE hat ähnliche Effekte:
window.attachEvent ('Onload', Funktion);Die Methode der Verwendung eines Hörers ist ebenfalls sehr einfach. Es soll zuerst ein Element auf der Seite erhalten und dann einen Listener für dieses Element verwenden, um das angehörte Ereignis und die entsprechende Veranstaltungsbearbeitungsfunktion zu definieren. Zum Beispiel oben:
document.getElementById ('link'). addEventListener ('klicken', Spaß, Falsch);Ausführlichere Anweisungen zur Verwendung des Monitors finden Sie in den ergänzenden Informationen am Ende des Artikels.
window.onload Ereignis
Das Onload -Ereignis wird nur ausgelöst, wenn die gesamte Seite vollständig geladen wurde. Wenn wir den JavaScript -Code in das Onload -Ereignis schreiben, können wir sicherstellen, dass der Browser unseren JavaScript -Code verarbeitet, nachdem das HTML -Element geladen wurde. Grundschreiben:
window.onload = function () {// code}Auf diese Weise wird der Code in dieser Funktion nach dem Laden verarbeitet. Diese Methode hat jedoch einen Nachteil, der ist, dass sie nur für diese Funktion verwendet werden kann. Mehrere Fenster. OneLoad -Ereignisse können auf der Seite nicht angezeigt werden. Wenn mehrere Onload -Ereignisse auftreten, überschreibt der nachfolgende Inhalt die vorherige.
Dann können wir dies tun, alle Funktionsnamen schreiben, die in einem Fenster geladen werden müssen. Ein Ereignis, und dann definieren Sie die Funktion außerhalb:
window.onload = function () {func1 (); func2 (); } function func1 () {…} Funktion func2 () {…}Obwohl dies in Ordnung ist, ist es sehr unpraktisch, da wir alle Funktionsnamen schreiben müssen, die geladen werden sollen, und es ist sehr problematisch zu ändern. Natürlich muss es eine Lösung geben. JQuery bietet eine sehr leistungsstarke Multi-Script-Lademethode, daher muss es eine Lösung für native JavaScript geben.
Window.onload übernimmt mehrere Funktionen gleichzeitig
Wir müssen eine Verarbeitungsfunktion schreiben und zuerst den Code betrachten:
Funktion addloadListener (fn) {if (typeof window.addeventListener! } else if (typeof document.adDeVentListener! } else if (typeof window.attachEvent! } else {var oldfn = window.onload; if (typeof window.onload! = 'function') {window.onload = fn; } else {window.onload = function () {oldfn (); fn (); }; }}}Lassen Sie uns einfach diese benutzerdefinierte Funktion addloadListener analysieren und einen Funktionsnamen als Parameter übergeben. Es bestimmt zunächst, ob der Browser den zuständigen Hörer unterstützt. Wenn es den Hörer unterstützt, verwendet der Listener Onload -Ereignisse des Fensterobjekts und übernimmt diese Funktion dann. Dieser Code verwendet die IF-Anweisung, um alle Hörereignisse aller Browser zu beurteilen, und ist kreuzbrowser kompatibel.
Wir setzen diesen Code oben im JavaScript -Code -Segment, definieren dann die relevanten Funktionen unten und verwenden dann die folgende Anweisung, um die JavaScript -Funktion zu laden.
addloadListener (func); function func () {…}Auf diese Weise müssen alle JavaScript -Funktionen nach dem Laden der Seite verarbeitet werden. Sie können die Funktion addloadListener direkt verwenden, und es können mehrere Funktionen verwendet werden. Im Allgemeinen ist es am besten, alle JavaScript mithilfe des Onload -Ereignisses zu laden, um unerwartete Situationen zu vermeiden.