JavaScript - Ereignisse
Was ist eine Veranstaltung?
Die Interaktion von JavaScript mit HTML wird durch Ereignisse behandelt, die auftreten, wenn der Benutzer oder der Browser eine Seite manipuliert.
Wenn die Seite geladen wird, wird sie als Ereignis bezeichnet. Wenn der Benutzer auf eine Schaltfläche klickt, ist auch dieser Klick ein Ereignis. Andere Beispiele sind Ereignisse wie das Drücken einer beliebigen Taste, das Schließen eines Fensters, das Ändern der Fenstergröße usw.
Entwickler können diese Ereignisse verwenden, um JavaScript-codierte Antworten auszuführen, die dazu führen, dass Schaltflächen Fenster schließen, Nachrichten Benutzern angezeigt werden, Daten validiert werden und praktisch jede andere Art von Antwort, die man sich vorstellen kann.
Ereignisse sind Teil des Document Object Model (DOM) Level 3 und jedes HTML-Element enthält eine Reihe von Ereignissen, die JavaScript-Code auslösen können.
Bitte lesen Sie dieses kleine Tutorial, um die HTML-Ereignisreferenz besser zu verstehen . Hier sehen wir einige Beispiele, um die Beziehung zwischen Event und JavaScript zu verstehen -
Klicken Sie auf Ereignistyp
Dies ist der am häufigsten verwendete Ereignistyp, der auftritt, wenn ein Benutzer mit der linken Maustaste klickt. Sie können Ihre Validierung, Warnung usw. gegen diesen Ereignistyp setzen.
Beispiel
Versuchen Sie das folgende Beispiel.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>Ausgabe
onsubmit-Ereignistyp
onsubmitist ein Ereignis, das auftritt, wenn Sie versuchen, ein Formular zu senden. Sie können Ihre Formularüberprüfung gegen diesen Ereignistyp stellen.
Beispiel
Das folgende Beispiel zeigt die Verwendung von onsubmit. Hier rufen wir avalidate()Funktion vor dem Senden von Formulardaten an den Webserver. Wennvalidate() Funktion gibt true zurück, das Formular wird gesendet, andernfalls werden die Daten nicht gesendet.
Versuchen Sie das folgende Beispiel.
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>onmouseover und onmouseout
Diese beiden Ereignistypen helfen Ihnen dabei, schöne Effekte mit Bildern oder sogar mit Text zu erzielen. Dasonmouseover Ereignis wird ausgelöst, wenn Sie mit der Maus über ein Element und das Element fahren onmouseoutwird ausgelöst, wenn Sie die Maus aus diesem Element herausbewegen. Versuchen Sie das folgende Beispiel.
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>Ausgabe
HTML 5 Standardereignisse
Die Standard-HTML 5-Ereignisse sind hier als Referenz aufgeführt. Hier gibt das Skript eine Javascript-Funktion an, die für dieses Ereignis ausgeführt werden soll.
| Attribut | Wert | Beschreibung |
|---|---|---|
| Offline | Skript | Wird ausgelöst, wenn das Dokument offline geschaltet wird |
| Onabort | Skript | Wird bei einem Abbruchereignis ausgelöst |
| onafterprint | Skript | Wird ausgelöst, nachdem das Dokument gedruckt wurde |
| onbeforeonload | Skript | Wird ausgelöst, bevor das Dokument geladen wird |
| onbeforeprint | Skript | Wird ausgelöst, bevor das Dokument gedruckt wird |
| onblur | Skript | Wird ausgelöst, wenn das Fenster den Fokus verliert |
| oncanplay | Skript | Wird ausgelöst, wenn Medien mit der Wiedergabe beginnen können, aber möglicherweise zum Puffern angehalten werden müssen |
| oncanplaythrough | Skript | Wird ausgelöst, wenn Medien bis zum Ende abgespielt werden können, ohne zum Puffern anzuhalten |
| bei Änderung | Skript | Wird ausgelöst, wenn sich ein Element ändert |
| onclick | Skript | Wird per Mausklick ausgelöst |
| oncontextmenu | Skript | Wird ausgelöst, wenn ein Kontextmenü ausgelöst wird |
| ondblclick | Skript | Auslöser per Mausklick |
| ondrag | Skript | Wird ausgelöst, wenn ein Element gezogen wird |
| ondragend | Skript | Wird am Ende eines Ziehvorgangs ausgelöst |
| ondragenter | Skript | Wird ausgelöst, wenn ein Element auf ein gültiges Ablageziel gezogen wurde |
| ondragleave | Skript | Wird ausgelöst, wenn ein Element über ein gültiges Ablageziel gezogen wird |
| ondragover | Skript | Wird zu Beginn eines Ziehvorgangs ausgelöst |
| ondragstart | Skript | Wird zu Beginn eines Ziehvorgangs ausgelöst |
| ondrop | Skript | Wird ausgelöst, wenn ein gezogenes Element gelöscht wird |
| ondurationchange | Skript | Wird ausgelöst, wenn die Länge des Mediums geändert wird |
| onemptied | Skript | Wird ausgelöst, wenn ein Medienressourcenelement plötzlich leer wird. |
| beleidigt | Skript | Wird ausgelöst, wenn das Medium das Ende erreicht hat |
| Fehler | Skript | Wird ausgelöst, wenn ein Fehler auftritt |
| im Fokus | Skript | Wird ausgelöst, wenn das Fenster scharfgestellt wird |
| onformchange | Skript | Wird ausgelöst, wenn sich ein Formular ändert |
| onforminput | Skript | Wird ausgelöst, wenn ein Formular Benutzereingaben erhält |
| onhaschange | Skript | Wird ausgelöst, wenn sich das Dokument geändert hat |
| oninput | Skript | Wird ausgelöst, wenn ein Element Benutzereingaben erhält |
| oninvalid | Skript | Wird ausgelöst, wenn ein Element ungültig ist |
| Onkeydown | Skript | Wird ausgelöst, wenn eine Taste gedrückt wird |
| onkeypress | Skript | Wird ausgelöst, wenn eine Taste gedrückt und losgelassen wird |
| onkeyup | Skript | Wird ausgelöst, wenn eine Taste losgelassen wird |
| onload | Skript | Wird ausgelöst, wenn das Dokument geladen wird |
| onloadeddata | Skript | Wird ausgelöst, wenn Mediendaten geladen werden |
| onloadedmetadata | Skript | Wird ausgelöst, wenn die Dauer und andere Mediendaten eines Medienelements geladen werden |
| Onloadstart | Skript | Wird ausgelöst, wenn der Browser beginnt, die Mediendaten zu laden |
| onmessage | Skript | Wird ausgelöst, wenn die Nachricht ausgelöst wird |
| onmousedown | Skript | Wird ausgelöst, wenn eine Maustaste gedrückt wird |
| onmousemove | Skript | Wird ausgelöst, wenn sich der Mauszeiger bewegt |
| onmouseout | Skript | Wird ausgelöst, wenn sich der Mauszeiger aus einem Element herausbewegt |
| onmouseover | Skript | Wird ausgelöst, wenn sich der Mauszeiger über ein Element bewegt |
| onmouseup | Skript | Wird ausgelöst, wenn eine Maustaste losgelassen wird |
| Onmousewheel | Skript | Wird ausgelöst, wenn das Mausrad gedreht wird |
| onoffline | Skript | Wird ausgelöst, wenn das Dokument offline geschaltet wird |
| onoine | Skript | Wird ausgelöst, wenn das Dokument online geschaltet wird |
| online | Skript | Wird ausgelöst, wenn das Dokument online geschaltet wird |
| onpagehide | Skript | Wird ausgelöst, wenn das Fenster ausgeblendet ist |
| onpageshow | Skript | Wird ausgelöst, wenn das Fenster sichtbar wird |
| Pause | Skript | Wird ausgelöst, wenn Mediendaten angehalten werden |
| onplay | Skript | Wird ausgelöst, wenn die Wiedergabe von Mediendaten beginnt |
| onplaying | Skript | Wird ausgelöst, wenn Mediendaten abgespielt werden |
| onpopstate | Skript | Wird ausgelöst, wenn sich der Verlauf des Fensters ändert |
| In Arbeit | Skript | Wird ausgelöst, wenn der Browser die Mediendaten abruft |
| onratechange | Skript | Wird ausgelöst, wenn sich die Wiedergaberate der Mediendaten geändert hat |
| onreadystatechange | Skript | Wird ausgelöst, wenn sich der Bereitschaftszustand ändert |
| Onredo | Skript | Wird ausgelöst, wenn das Dokument wiederholt wird |
| onresize | Skript | Wird ausgelöst, wenn die Fenstergröße geändert wird |
| onscroll | Skript | Wird ausgelöst, wenn die Bildlaufleiste eines Elements gescrollt wird |
| gesucht | Skript | Wird ausgelöst, wenn das Suchattribut eines Medienelements nicht mehr wahr ist und die Suche beendet wurde |
| auf der Suche | Skript | Wird ausgelöst, wenn das Suchattribut eines Medienelements wahr ist und die Suche begonnen hat |
| onselect | Skript | Wird ausgelöst, wenn ein Element ausgewählt ist |
| installiert | Skript | Wird ausgelöst, wenn beim Abrufen der Mediendaten ein Fehler auftritt |
| Lagerung | Skript | Wird ausgelöst, wenn ein Dokument geladen wird |
| onsubmit | Skript | Wird ausgelöst, wenn ein Formular gesendet wird |
| onsuspend | Skript | Wird ausgelöst, wenn der Browser Mediendaten abgerufen hat, aber gestoppt wurde, bevor die gesamte Mediendatei abgerufen wurde |
| ontimeupdate | Skript | Wird ausgelöst, wenn das Medium seine Wiedergabeposition ändert |
| onundo | Skript | Wird ausgelöst, wenn ein Dokument rückgängig gemacht wird |
| onunload | Skript | Wird ausgelöst, wenn der Benutzer das Dokument verlässt |
| onvolumechange | Skript | Wird ausgelöst, wenn das Medium die Lautstärke ändert, auch wenn die Lautstärke auf "Stumm" eingestellt ist. |
| Warten | Skript | Wird ausgelöst, wenn das Medium nicht mehr abgespielt wird, aber voraussichtlich wieder aufgenommen wird |