JavaScript-Ereignisse (Events)

Ereignisse sind Operationen, die im Browser stattfinden und von einem Benutzer oder dem Browser selbst ausgelöst werden können.

Hier sind einige Beispiele für häufige Ereignisse, die auf einer Website auftreten können:

• Vollständige Ladevorgang der Seite

• Klicken des Benutzers auf einen Knopf

• Scrollen des Dokuments durch den Benutzer

• Anpassung der Browsergröße durch den Benutzer

• Bewegung der Maus des Benutzers

• Einreichen des Formulars durch den Benutzer

• Drücken des Benutzers einer Taste auf der Tastatur

• Änderung des HTML-Eingabefelds

Jedes verfügbare Ereignis hatEventhandlerdieserEventhandlerist ein Codeblock (normalerweise eine vom Benutzer definierte JavaScript-Funktion), der bei Auslösung des Ereignisses ausgeführt wird.

Durch das Verständnis von Ereignissen können Sie den Endbenutzern eine interaktivere Web-Erfahrung bieten.

Ein einfaches Beispiel

Wenn ein Ereignis ausgelöst wird, z.B. wenn der Benutzer auf den Knopf klickt, kann ein JavaScript-Codeblock ausgeführt werden.

In dem folgenden Beispiel haben wir einen Knopf, wenn Sie ihn drücken, wird die Funktion aufgerufenshowDate()Funktion:

<button onclick="showDate()">Klicken Sie mich</button>

JavaScript showDate()Die Funktion ist wie folgt dargestellt:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

Art und Weise der Verwendung von Ereignissen

Es gibt drei Möglichkeiten, Ereignisse einem Element zuzuweisen, damit es bei Auslösung des zugehörigen Ereignisses ausgeführt wird:

• inline Ereignisbehandlung

• Ereignisbehandlungsattribut

• Ereignis-Listener

Wir werden alle drei Methoden vorstellen, um sicherzustellen, dass Sie mit jeder Möglichkeit, ein Ereignis auszulösen, vertraut sind.

inline Ereignisbehandlungsattribut

Um Ereignisse einer HTML-Schaltung zuzuweisen, können wir die Methode verwendenHTML-Ereignisattribute.

Im folgenden Beispiel wird, wenn der Benutzer<p>wenn ein Element geklickt wird, wird sein Inhalt geändert:

<p onclick="this.innerHTML = "'Hello world'>Klicke hier, um diesen Text zu ändern</p>

Im folgenden Beispiel wird, wenn der Benutzer<p>wenn ein Element geklickt wird, wird eine Funktion aufgerufen:

<p onclick="changeText(this)">Klicke hier, um diesen Text zu ändern</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

In den folgenden Beispielen haben wir einen Knopf, auf den gedrückt wird, um den Hintergrund in eine zufällige Farbe zu ändern:

<button onclick="bgChange()">Klicke mich</button>
<script>
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}
</script>

Inline-Ereignisbehandlungen sind eine einfache Methode, um Ereignisse zu verstehen, sollten aber normalerweise nicht außerhalb von Tests und Educationalzwecken verwendet werden.

Ereignisbehandlungsattribut

Der nächste Schritt für Inline-Ereignisbehandlungen istEreignisbehandlungsattribut. Dies ist sehr ähnlich wie ein Inline-Handler, außer dass wir das Element in JavaScript und nicht in HTML setzen.

Im folgenden Beispiel wird ein Ereignis onclick für das HTML-Element mit der ID "para" zugewiesen:

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

Wir können auch den Ereignisbehandlungsattribut auf den Wert eines Namensfunktion setzen:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

Im obigen Beispiel wird der NamechangeTextder Funktion zugewiesen wirdid="para"des HTML-Elements.

Wenn dieser Elemente geklickt wird, wird diese Funktion ausgeführt.

In den folgenden Beispielen haben wir einen Knopf, auf den gedrückt wird, um den Hintergrund in eine zufällige Farbe zu ändern:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

Hinweis:Eventhandlernicht befolgtDie camelCase-Namenskonvention, die die meisten JavaScript-Code befolgen. Beachten Sie, dass der Codeonclick, nichtonClick.

onfocus- und onblur-Ereignisse

onfocus wird dieses Ereignis ausgelöst, wenn das Element den Fokus erhält.

onblur wird dieses Ereignis ausgelöst, wenn das Element den Fokus verliert.

<input type="text" onfocus="func1(this)" onblur="func2(this)>

onchange-Ereignis

onchange wird dieses Ereignis ausgelöst, wenn der Wert des Elements geändert wird.

<input type="text" onchange="myFunc(this)" value="Hello">

onmouseover- und onmouseout-Ereignisse

onmouseover wird dieses Ereignis ausgelöst, wenn das Zeigergerät (in der Regel der Mauszeiger) auf das Element oder eines seiner Unterelemente bewegt wird.

onmouseout wird dieses Ereignis ausgelöst, wenn das Zeigergerät (in der Regel der Mauszeiger) vom Element oder einem seiner Unterelemente entfernt wird.

Weiters Lesen

HTML-Referenz:HTML-Event-Attribut-Referenz

JavaScript-Referenz:HTML-DOM-Eventobjekt-Referenz