Vollständige Liste der HTML/Javascript-Ereignishandler mit Beispielen

Event-Handler sollten korrekt verwendet werden; es empfiehlt sich, sie nicht direkt in Tag-Attribute zu schreiben, sondern Event-Handler in eingebundene Dateien mit JavaScript-Code zu installieren. Wenn die jQuery-Bibliothek verwendet wird, muss der Name des Handlers ohne das Präfix on geschrieben werden.

click / onclick

– Klicken Sie auf ein Element. tritt auf, wenn das Element mit der linken Maustaste angeklickt wird (bei Geräten mit Touchscreen tritt es auf, wenn es berührt wird).

Popup-Aufnahmeoptionen

<input value="Drück mich" onclick="alert('Klick!')" type="button">
<a href="#" onclick="alert('Beispiel 1 hat funktioniert'); return false;">Beispiel 1</a>

Zahlenfolge beginnend mit 1

<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert("Kaninchennummer " + i);
    }
  }
</script>
<input type="button" onclick="countRabbits()" value="Kaninchen zählen!">
<input id="elem" type="button" value="Drück mich!">
<script>
  elem.onclick = function() {
    alert('Danke');
  };
</script>
<input type="button" id="button" value="Taste">
<script>
  button.onclick = function() {
    alert('Klik!');
  };
</script>

Zeigt „Press me“ in einem Popup-Fenster an – den Inhalt der Schaltfläche

<button onclick="alert(this.innerHTML)">Press me</button>

Mehrere Popup-Ereignishandler

<input id="elem" type="button" value="Press me"/>
<script>
  function handler1() {
    alert('Danke!');
  };
  function handler2() {
    alert('Danke noch einmal!');
  }
  elem.onclick = () => alert("Hallo");
  elem.addEventListener("click", handler1); // Danke!
  elem.addEventListener("click", handler2); // Danke noch einmal!
</script>

Abrufen von Mauskoordinaten von einem Ereignisobjekt

<input type="button" value="Press me" id="elem">
<script>
  elem.onclick = function(event) {
    // Ereignistyp, Element und Klickkoordinaten anzeigen
    alert(event.type + " на " + event.currentTarget);
    alert("Koordinaten: " + event.clientX + ":" + event.clientY);
  };
</script>

Den Hintergrund eines Objekts ändern

<button>Change color</button>
<script>
const btn = document.querySelector("button");
function random(number) {
  return Math.floor(Math.random() * (number + 1));
}
btn.onclick = function () {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
};
</script>
<button onclick="bgChange()">Press me</button>
<script>
function bgChange() {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
}
</script>

Ändern des Hintergrunds eines div-Elements

<div id='myDiv'>Farbwechselelement</div>
<button onclick='changeColor()'>Farbe ändern</button>
<script>
function changeColor() {
  document.getElementById('myDiv').style.backgroundColor = 'red';
}
</script>

Linkfarbe ändern

<script>
function ChangeColor(Element) {
	if (Element.style.color == 'green') Element.style.color = 'red';
	else Element.style.color = 'green';
	return false;
}
</script>
<a href="#" style="color: green;" onclick="return ChangeColor(this);">Farbe ändern</a>

Formularvalidierung

<form>
  <div>
    <label for="fname">Name: </label>
    <input id="fname" type="text" />
  </div>
  <div>
    <label for="lname">Nachname: </label>
    <input id="lname" type="text" />
  </div>
  <div>
    <input id="submit" type="submit" />
  </div>
</form>
<p></p>
<script>
var form = document.querySelector("form");
var fname = document.getElementById("fname");
var lname = document.getElementById("lname");
var submit = document.getElementById("submit");
var para = document.querySelector("p");

form.onsubmit = function (e) {
  if (fname.value === "" || lname.value === "") {
    e.preventDefault();
    para.textContent = "Beide Felder müssen ausgefüllt werden!";
  }
};
</script>

Abfangen von CSS-Ereignissen im Video mit der Funktion stopPropagation(), die bei Aufruf im Ereignishandler eines Objekts dazu führt, dass der Handler ausgeführt wird, das Ereignis jedoch nicht weiter unten in der Kette aufsteigt

<button>Display video</button>
<div class="hidden">
  <video>
    <source src="rabbit320.mp4" type="video/mp4" />
    <source src="rabbit320.webm" type="video/webm" />
    <p>
      Your browser doesn't support HTML5 video. Here is a
      <a href="rabbit320.mp4">link to the video</a> instead.
    </p>
  </video>
</div>
div {       position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        ...      }
.hidden {
   left: -50%;
  }
.showing {
   left: 50%;
  }
<script>
var videoBox = document.querySelector("div");
var video = document.querySelector("video");
videoBox.onclick = function () {
  videoBox.setAttribute("class", "hidden");
};
video.onclick = function () {
  video.play();
};
video.onclick = function (e) {
  e.stopPropagation();
  video.play();
};
</script>
<p style="text-align: justify;">Text ein- und ausblenden</p>
<button onclick='toggleVisibility()'>Ein-/Ausblenden</button>
<div id='hiddenDiv' style='display:none'>Versteckter Text</div>
<script>
function toggleVisibility() {
    let element = document.getElementById('hiddenDiv');
    if (element.style.display === 'none') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}
</script>

Laden von Daten über AJAX, um Daten vom Server zu laden, ohne die Seite neu zu laden

function fetchData() {
    // Hier ist Ihr Code für die AJAX-Anfrage
}
<onclick="fetchData()">Daten herunterladen</button>

Ändern des Linknamens von On in Off

<script>
//Warten Sie, bis die Seite vollständig geladen ist
window.onload = function () {

    //Holen Sie sich die Elementkennung
    var a = document.getElementById('switch');
    
    //Hängen Sie eine Veranstaltung daran auf
    a.onclick = function() {
        //Wir führen einige Aktionen durch
        if (this.innerHTML=='On') this.innerHTML = 'Off';
        else this.innerHTML = 'On';
        //verhindern, dass Sie auf den Link klicken href
        return false;
    }
}
</script>
<a id="switch" href="#">On</a>

onabort

– Unterbrechung der Wiedergabe. Das Ereignis „onabort“ tritt auf, wenn der Download von Audio oder Video unterbrochen wird. Das onabort-Ereignis tritt nur auf, wenn der Download abgebrochen wird, nicht, wenn ein Fehler auftritt. Gilt für Elemente audio, embed, img, object, video.

Benachrichtigung, dass das Laden des Videos unterbrochen wurde

<video id="myVideo" onabort="alert('Video load aborted')">

Benachrichtigung, dass das Laden des Bildes unterbrochen wurde

<img id="myImage" src="example.jpg" onabort="imageAborted()">
<script>
    function imageAborted() {
        alert("Image load was aborted by the user.");
    }
</script>

Benachrichtigung, dass die Formularübermittlung unterbrochen wurde

<form id="myForm">
    <input type="text" placeholder="Enter your name">
    <input type="submit" value="Submit">
</form>
<script>
    var form = document.getElementById("myForm");
    form.addEventListener("abort", formAborted);

    function formAborted() {
        alert("Form submission was aborted by the user.");
    }
</script>

onafterprint – Druckvorgang abgeschlossen

Das onafterprint-Ereignis tritt auf, wenn die Seite mit dem Drucken beginnt. Das Ereignis onafterprint tritt auf, wenn der Druckdialog geschlossen wird. Der Browser läuft onafterprint und onbeforeprint, sodass Notizen, Erklärungen und Kommentare zum Druckvorgang hinzugefügt werden können. Anwendbar für body.

<body onafterprint="myFunction()">

onautocomplete – Automatisches Ausfüllen des Formulars abgeschlossen

Ein Attribut, mit dem das Formular mit einem Klick ausgefüllt wird – der Browser fügt die Werte in die entsprechenden Felder ein.

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" autocomplete="on">
</form>

onautocompleteerror – Fehler beim automatischen Ausfüllen des Formulars

onbeforeprint – Vorbereitung zum Drucken

onbeforeunload – das Dokument wurde entladen

Wenn ein Benutzer die Seite verlässt, können wir ihn fragen, ob er die Seite wirklich verlassen möchte. Verantwortlich dafür ist die Behandlung des beforeunload-Events. Das Ereignis tritt vor dem Entladeereignis der Seite unload auf. Dieses Ereignis ermöglicht es der Webseite, einen Bestätigungsdialog auszulösen, in dem der Benutzer gefragt wird, ob er die Seite wirklich verlassen möchte. Bestätigt der Nutzer, navigiert der Browser zu einer neuen Seite, andernfalls bricht er die Navigation ab. Um einen Bestätigungsdialog anzuzeigen, muss der Ereignishandler gemäß der Spezifikation „preventDefault()“ für das Ereignis aufrufen. Anwendbar für body.

<body onbeforeunload="return myFunction()">
<script>
function myFunction() {
  return "Möchten Sie die Seite wirklich schließen?...";
}
</script>

onblur – Konzentrationsverlust

Ereignis focus im Moment der Fokussierung aufgerufen, und blur – wenn das Element den Fokus verliert. Unterstützung focus/blur garantiert für Elemente, mit denen der Besucher interagieren kann: button, input, select, a usw. Zum anderen Formatierungselemente div, span, table – Standardmäßig kann kein Fokus empfangen werden. Verfahren elem.focus() funktioniert für sie nicht, und Ereignisse focus/blur funktioniert nie. Dies kann mit einem HTML-Attribut geändert werden tabindex.

Validierung (Überprüfung) der eingegebenen Daten mit einer Beschriftung unter dem Formular

<style>
  .invalid { border-color: red; }
  #error { color: red }
</style>
<script>
input.onblur = function() {
  if (!input.value.includes('@')) { // не email
    input.classList.add('invalid');
    error.innerHTML = 'Bitte geben Sie richtig eine email.'
  }
};
input.onfocus = function() {
  if (this.classList.contains('invalid')) {
    // Wir entfernen die Fehleranzeige, weil Der Benutzer möchte Daten erneut eingeben
    this.classList.remove('invalid');
    error.innerHTML = "";
  }
};
</script>
Ваш email: <input type="email" id="input">
<div id="error"></div>

Validierung (Überprüfung) der eingegebenen Daten durch Ausfüllen des Formulars mit Farbe

<style>
  .error {
    background: red;
  }
</style>
<script>
  input.onblur = function() {
    if (!this.value.includes('@')) { // nicht email
      // Fehler anzeigen
      this.classList.add("error");
      // ...und kehren Sie den Fokus zurück
      input.focus();
    } else {
      this.classList.remove("error");
    }
  };
</script>
Ваш email: <input type="email" id="input">
<input type="text" style="width:280px" placeholder="Geben Sie eine falsche E-Mail-Adresse ein und klicken Sie hier">

Formulartext ändern CLICK HERE

<input type="text" value="CLICK HERE" />
<script>
let input = document.querySelector("input");
input.onblur = inputBlur;
input.onfocus = inputFocus;
function inputBlur() {
  input.value = "Focus has been lost";
}
function inputFocus() {
  input.value = "Focus is here";
}
</script>

Überprüfen Sie die Form anhand einer Rahmenkontur

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Ereignis onblur</title>
  <style>
   .warning {
    background-color: #ffe;
    outline: 1px solid #dc143c;
   }
  </style>
  <script>
   function warning(field) {
    if (field.value == '') field.classList.add('warning');
    else field.classList.remove('warning');
   }
  </script>
 </head> 
 <body>
  <form> 
   <p><input placeholder="Name" onblur="warning(this)"></p>
   <p><input placeholder="Nachname" onblur="warning(this)"></p>
   <p><input placeholder="Adresse" onblur="warning(this)"></p>
  </form>
 </body>
</html>

Fokusbeleuchtung ohne onblur

<style>
*!*input:focus*/!* {
  background: #FA6;
  outline: none;  /* Rahmen entfernen */
}
</style>
<input type="text">
<p>Wähler focus hebt ein Element hervor, wenn Sie darauf fokussieren, und entfernt den Rahmen, den der Browser standardmäßig zum Hervorheben dieses Elements verwendet.</p>

Platzhalter – Hinweiswert im Inneren INPUT, das beim Fokussieren automatisch verschwindet und solange existiert, bis der Besucher mit der Texteingabe beginnt, ohne onblur

<style>
.my*!*::-webkit-input-placeholder*/!* {
  color: red;
  font-style: italic;
}
.my*!*::-moz-input-placeholder*/!* {
  color: red;
  font-style: italic;
}
.my*!*::-ms-input-placeholder*/!* {
  color: red;
  font-style: italic;
}
</style>
<input class="my" type="text" placeholder="E-mail">

oncancel – Aktion abbrechen

Brechen Sie den aktuellen Vorgang auf dem Gerät ab. Wird zur asynchronen Gerätesteuerung verwendet. Wenn Sie diese Funktion ausführen, bevor Sie einen Vorgang starten, wird der Vorgang abgebrochen.

Device.Cancel ();

oncanplay

– Sie können mit der Wiedergabe der angegebenen Mediendatei beginnen

Das oncanplay-Ereignis tritt auf, wenn der Browser mit der Wiedergabe des angegebenen Audios/Videos beginnen kann (wenn es zunächst ausreichend gepuffert ist). Während des Audio-/Video-Ladevorgangs treten die folgenden Ereignisse in dieser Reihenfolge auf: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough

Führen Sie JavaScript aus, wenn das Video abspielbereit ist:

<video oncanplay="myFunction()">

oncanplaythrough

– Sie können mit der Wiedergabe der angegebenen Mediendatei beginnen, ohne zum Puffern anhalten zu müssen. Das oncanplaythrough-Ereignis tritt ein, wenn der Browser feststellt, dass er das angegebene Medium abspielen kann, ohne dass es zum Puffern angehalten werden muss.

Führen Sie JavaScript aus, wenn das Video vollständig und ohne Unterbrechung abgespielt werden kann:

<video oncanplaythrough="myFunction()">

onchange – Wert ändern

Das onchange-Ereignis tritt auf, wenn der Wert des Elements geändert wurde. Bei Optionsfeldern und Kontrollkästchen tritt das Ereignis onchange ein, wenn sich der aktivierte Status ändert. Dieses Ereignis ähnelt dem oninput-Ereignis. Der Unterschied besteht darin, dass das oninput-Ereignis unmittelbar nach der Wertänderung des Elements auftritt, während das onchange-Ereignis auftritt, wenn das Element den Fokus verliert, nachdem sich der Inhalt geändert hat. Ein weiterer Unterschied besteht darin, dass das onchange-Ereignis auch auf das Element wirkt select. Ein Handler für das onchange-Ereignis, das ausgelöst wird, wenn sich der Wert des Elements geändert hat und es den Fokus verloren hat. Bei AudioTrackList-, VideoTrackList- und TextTrackList-Objekten tritt dieses Ereignis auf, wenn eine oder mehrere Spuren aktiviert/deaktiviert werden. Führt JavaScript-Code aus, wenn das Änderungsereignis auftritt; das heißt, wenn das Feld Select, Text oder Textarea verliert den Fokus und sein Wert wurde geändert.

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde

Führen Sie JavaScript aus, wenn der Benutzer die ausgewählte Elementoption ändert select:

<select onchange="myFunction()">

Hier ist userName ein Textfeld. Wenn der Benutzer den Text ändert und das Feld verlässt, ruft der onChange-Handler die Funktion checkValue auf, um zu bestätigen, dass userName gültig ist:

<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">

onclose – etwas schließen

Ereignishandler für Schließereignisse, die an das Fenster gesendet werden. Das OnClose-Ereignis tritt ein, wenn das Dialogfeld geschlossen wird. Sie können einen Ereignishandler für das OnClose-Ereignis erstellen, um bestimmte Aktionen auszuführen, wenn das Dialogfeld geschlossen wird. Ereignishandler close, Dies wird für Dialogelemente aufgerufen, wenn diese geschlossen werden, und auch für WebSocket-Elemente, wenn die Verbindung abgeschlossen ist.

oncontextmenu – Öffnen des Kontextmenüs

Das oncontextmenu-Ereignis tritt auf, wenn der Benutzer mit der rechten Maustaste auf ein HTML-Element klickt, um das contextmenu zu öffnen. Event-Handler-Eigenschaft für das Rechtsklick-Ereignis innerhalb eines Elements window. Wenn das Standardverhalten nicht verhindert wird, wird das Browser-Kontextmenü aktiviert (Es gibt einen Fehler in IE8, der dazu führt, dass das Kontextmenü nicht aktiviert wird, wenn ein contextmenu-Ereignishandler definiert ist). Die Veranstaltung wird zusammen mit anderen Veranstaltungen stattfinden right-click und ist unabhängig vom „contextmenu“-Attribut des Elements.

Führen Sie JavaScript aus, wenn der Benutzer im Kontextmenü mit der rechten Maustaste auf das div-Element klickt:

<div oncontextmenu="myFunction()" contextmenu="mymenu">

Der Code in diesem Beispiel ändert das Standardverhalten des Browsers, indem er den Rechtsklick deaktiviert.

document.oncontextmenu = function () {
  // Verwenden Sie aus Gründen der IE8-Kompatibilität das Objekt „document“ anstelle von „window“.
  return false;
};
window.addEventListener(
  "contextmenu",
  function (e) {
    // Nicht kompatibel mit IE-Versionen vor 9
    e.preventDefault();
  },
  false,
);

oncopy – Kopiervorgang abgeschlossen

Das oncopy-Ereignis tritt auf, wenn der Benutzer den Inhalt eines Elements kopiert. Das oncopy-Ereignis tritt auch auf, wenn der Benutzer ein Element kopiert, beispielsweise ein Bild, das mit dem img-Element erstellt wurde. Das Oncopy-Ereignis wird hauptsächlich für Elemente verwendet „input“ mit type=“text“. Wird beim Einfügen/Kopieren/Löschen von Text ausgelöst. Wenn Sie die Browseraktion in ihren Handlern abbrechen, erfolgt kein Einfügen/Kopieren/Löschen. Der eingefügte Wert kann nicht abgerufen werden: Zum Zeitpunkt der Auslösung des Ereignisses hat das Element noch den alten Wert und der neue ist nicht verfügbar.

Führen Sie JavaScript aus, wenn Sie Elementtext kopieren input:

<input type="text" oncopy="myFunction()" value="Versuchen Sie, diesen Text zu kopieren">

oncuechange – Ändern der Beschriftung im Element track

Handler für das cuechange-Ereignis, das ausgelöst wird, wenn das TextTrack-Element die aktuell angezeigten Zeitstempel ändert (cue).

oncut – Der Inhalt wurde gekürzt

Das oncut-Ereignis tritt auf, wenn der Benutzer den Inhalt eines Elements ausschneidet. Obwohl das oncut-Ereignis von allen HTML-Elementen unterstützt wird, ist es tatsächlich nicht möglich, Inhalte beispielsweise in einem p-Element auszuschneiden, ES SEI DENN, das Element hat contenteditable auf gesetzt „true“. Das Oncut-Ereignis wird hauptsächlich für Elemente verwendet input mit type=“text“.

Führen Sie JavaScript aus, wenn Sie Text in einem Element ausschneiden input:

<input type="text" oncut="myFunction()" value="Versuchen Sie, diesen Text zu kürzen">

ondblclick – Doppelklicken Sie auf das Element

Handler für das dblclick-Ereignis, das auftritt, wenn mit der linken Maustaste doppelgeklickt wird. Das ondblclick-Ereignis tritt auf, wenn der Benutzer auf ein HTML-Element doppelklickt. Das heißt, wenn der Benutzer auf ein Formularelement oder einen Hyperlink doppelklickt.

type – Gibt den Ereignistyp an.

target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.

layerX, layerY, pageX, pageY, screenX, screenY – Stellt die Position des Cursors dar, wenn das Ereignis auftritt.

which – Stellt 1 für einen linken Mausklick und 3 für einen rechten Mausklick dar.

modifiers – Enthält eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedrückt wurden.

Führen Sie JavaScript aus, wenn Sie auf das p-Element doppelklicken:

<p ondblclick="myFunction()">Doppelklicken Sie auf mich</p>

Hier wird der alert-dialog angezeigt, wenn der Benutzer auf die Schaltfläche doppelklickt:

<form>
<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">
</form>

ondrag – Ziehen eines Elements

Das ondrag-Ereignis tritt auf, wenn Sie ein Element oder ausgewählten Text ziehen. Drag & Drop ist eine sehr häufige Funktion in HTML5. Dabei „greifen“ Sie ein Objekt und ziehen es an eine andere Position.

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
data – Gibt ein Array von Zeichenfolgen zurück, das die URLs der freigegebenen Objekte enthält.
modifiers – Enthält eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedrückt wurden.
screenX, screenY – Stellt die Position des Cursors dar, wenn das Ereignis auftritt.

JavaScript ausführen, wenn das p-Element gezogen wird:

<p draggable="true" ondrag="myFunction(event)">Zieh mich!</p>

ondragend – Das Ziehen des Elements ist abgeschlossen

Das ondragend-Ereignis tritt ein, wenn der Benutzer mit dem Ziehen eines Elements oder einer Textauswahl fertig ist.

Führen Sie JavaScript aus, wenn der Benutzer mit dem Ziehen des p-Elements fertig ist:

<p draggable="true" ondragend="myFunction(event)">Zieh mich!</p>

ondragenter

– Das Element wird in eine gültige Zielzone gezogen. Das ondragenter-Ereignis tritt auf, wenn das gezogene Element oder der ausgewählte Text ein gültiges Löschziel erreicht. Die Ereignisse ondragenter und ondragleave können dem Benutzer helfen zu verstehen, dass das gezogene Element im Begriff ist, das Ablageziel zu betreten oder zu verlassen. Dies kann beispielsweise dadurch erreicht werden, dass die Hintergrundfarbe festgelegt wird, wenn das gezogene Element das Ziehziel erreicht, und die Farbe gelöscht wird, wenn das Element vom Ziel wegbewegt wird.

JavaScript ausführen, wenn das gezogene Element das Ziehziel erreicht:

<div ondragenter="myFunction(event)"></div>

ondragexit

– Beenden Sie den Drag-and-Drop-Modus. Ein Handler für das dragexit-Ereignis, das auftritt, wenn ein Element nicht mehr das Ziel eines Elements ist, das es akzeptieren kann.

ondragleave

– Element hinterlässt ein gültiges Ziel. Das ondragleave-Ereignis tritt ein, wenn das gezogene Element oder die Textauswahl ein gültiges Ablageziel verlässt.

JavaScript ausführen, wenn das gezogene Element vom Ziehziel wegbewegt wird:

<div ondragleave="myFunction(event)"></div>

ondragover

– Das Element wird an einen gültigen Zielpunkt gezogen. Das ondragover-Ereignis tritt auf, wenn ein gezogenes Element oder ein ausgewählter Text über ein gültiges Ablageziel gezogen wird. Standardmäßig können Daten/Elemente nicht aus anderen Elementen entfernt werden. Um das Löschen zu ermöglichen, müssen wir die Elementverarbeitung standardmäßig deaktivieren. Dies erfolgt durch Aufrufen der Methode event.preventDefault() für das ondragover-Ereignis.

JavaScript ausführen, wenn ein Element über das Ziehziel gezogen wird:

<div ondragover="myFunction(event)"></div>

ondragstart

– Beginn des Drag-and-Drop-Vorgangs. Das ondragstart-Ereignis tritt auf, wenn der Benutzer mit dem Ziehen eines Elements oder ausgewählten Texts beginnt.

Führen Sie JavaScript aus, wenn der Benutzer mit dem Ziehen des p-Elements beginnt:

<p draggable="true" ondragstart="myFunction(event)">Zieh mich!</p>

ondrop

– Das gezogene Element wird freigegeben. Das ondrop-Ereignis tritt ein, wenn das gezogene Element oder der ausgewählte Text auf einem gültigen Ablageziel abgelegt wird.

JavaScript ausführen, wenn ein gezogenes Element in einem div entfernt wird:

<div ondrop="myFunction(event)"></div>

ondurationchange

– Änderung der Medienlänge. Das ondurationchange-Ereignis tritt auf, wenn sich die Dauer des Audios/Videos ändert. Beim Laden von Audio/Video ändert sich die Dauer von „NaN“ zur tatsächlichen Dauer des Audios/Videos. Während des Audio-/Video-Ladevorgangs treten die folgenden Ereignisse in dieser Reihenfolge auf: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough

Führen Sie JavaScript aus, wenn sich die Videolänge geändert hat:

<video ondurationchange="myFunction()">

onemptied

– Die Datei war plötzlich nicht mehr verfügbar. Ein Handler für das emptied-Ereignis, das auftritt, wenn die aktuelle Wiedergabeliste für ein Audio- oder Videoelement leer ist. Meistens aufgrund eines Verbindungsfehlers.

onended

– Die Wiedergabe ist abgeschlossen. Das onended-Ereignis tritt auf, wenn das Audio/Video das Ende erreicht. Dieses Ereignis ist nützlich für Nachrichten wie „Danke fürs Zuhören“, „Danke fürs Zuschauen“ usw.

Führen Sie JavaScript aus, wenn der Ton endet:

<audio onended="myFunction()">

onerror

– Es ist ein Fehler aufgetreten. Das onerror-Ereignis wird ausgelöst, wenn beim Laden einer externen Datei (z. B. eines Dokuments oder Bilds) ein Fehler auftritt. Bei der Verwendung auf Audio-/Videomedien treten zugehörige Ereignisse auf, wenn es zu einer Unterbrechung des Medienladevorgangs kommt: onabort, onemptied, onstalled, onsuspend.

Das error-ereignis tritt nur auf, wenn ein JavaScript-Syntaxfehler oder Laufzeitfehler auftritt, nicht, wenn ein Browserfehler auftritt. Zum Beispiel, wenn Sie versuchen zu installieren window.location.href=’notThere.html‘, und file notThere.html nicht vorhanden ist, handelt es sich bei der resultierenden Fehlermeldung um eine Browsermeldung. Daher wird onError diese Nachricht nicht abfangen. Das error-ereignis wird jedoch durch eine ungültige URL im IMG-Tag oder ungültige Bilddaten ausgelöst.

window.onerror Gilt nur für Fehler, die in dem Fenster auftreten, das window.onerror enthält, und nicht für Fehler in anderen Fenstern.

onError kann die folgenden Werte haben:
– null, um alle JavaScript-Fehlerdialoge zu unterdrücken. Wenn Sie window.onerror auf null setzen, sehen Ihre Benutzer keine durch Ihren Code verursachten JavaScript-Fehler.
– Der Name der Funktion, die Fehler behandelt (Argumente sind der Nachrichtentext, die URL und die Zeilennummer mit dem Fehler). Um den Standard-JavaScript-Fehlerdialog zu unterdrücken, muss diese Funktion zurückkehren true. Siehe Beispiel 3 unten.
– Eine Variable oder Eigenschaft, die Null oder eine gültige Funktionsreferenz enthält.
Wenn Sie eine Fehlerbehandlungsfunktion schreiben, haben Sie drei Möglichkeiten, Fehler zu melden:
– Verfolgen Sie Fehler, aber lassen Sie zu, dass sie über einen Standard-JavaScript-Dialog gemeldet werden (verwenden Sie eine Fehlerbehandlungsfunktion, die „false“ oder keinen Wert zurückgibt).
– Melden Sie Fehler selbst und deaktivieren Sie den Standarddialog (verwenden Sie eine Fehlerbehandlungsfunktion, die Folgendes zurückgibt true).
– Alle Fehlermeldungen deaktivieren (im onError-Handler auf Null setzen).

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde

Führen Sie JavaScript aus, wenn beim Laden eines Bildes ein Fehler auftritt:

<img src="image.gif" onerror="myFunction()">

Beispiel 1: Handler mit Nullwert. In diesem IMG-Tag unterdrückt der Code onError=“null“ Fehlermeldungen, wenn beim Laden des Bildes ein Fehler auftritt.

<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">

Beispiel 2: Null-Handler für ein Fenster. Der onError-Handler für ein Fenster kann nicht über HTML ausgedrückt werden. Daher müssen Sie im SCRIPT-Tag alles Notwendige in Kleinbuchstaben eingeben. Der folgende Code weist dem onError-Handler für das gesamte Fenster null zu, nicht nur für das Image-Objekt. Dadurch werden alle JavaScript-Fehlermeldungen unterdrückt, einschließlich derjenigen für das Image-Objekt.

<SCRIPT>
window.onerror=null
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">

Wenn das Image-Objekt jedoch über einen eigenen speziellen onError-Handler verfügt, wird dieser Handler ausgeführt, wenn beim Bild ein Fehler auftritt. Dies liegt daran, dass window.onerror=null JavaScript-Fehlermeldungen unterdrückt, nicht onError-Handler.

<SCRIPT>
window.onerror=null
function myErrorFunc() {
   alert("The image had a nasty error.")
}
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">

Im folgenden Beispiel unterdrückt window.onerror=null alle Fehlermeldungen. Ohne onerror=null verursacht der Code einen Stapelüberlauffehler, da es eine unendliche Rekursion gibt.

<SCRIPT>
window.onerror = null;
function testErrorFunction() {
   testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">
test message
</BODY>

Beispiel 3: Fehlerbehandlungsfunktion. Hier wird die Funktion myOnError definiert, die JavaScript-Fehler abfängt. Diese Funktion verwendet drei Arrays, um die Nachricht, die URL und die problematische Zeichenfolge für jeden Fehler zu speichern. Wenn der Benutzer auf die Schaltfläche „Display Error Report“ klickt, öffnet die Funktion „displayErrors“ ein Fenster und generiert darin eine Fehlermeldung. Beachten Sie, dass diese Funktion zurückkehrt true um den Standard-JavaScript-Fehlerdialog zu unterdrücken.

<SCRIPT>
window.onerror = myOnError
msgArray = new Array()
urlArray = new Array()
lnoArray = new Array()
function myOnError(msg, url, lno) {
   msgArray[msgArray.length]
= msg
   urlArray[urlArray.length] = url
   lnoArray[lnoArray.length]
= lno
   return true
}
function displayErrors() {
   win2=window.open('','window2','scrollbars=yes')
   win2.document.writeln('<B>Error Report</B><P>')
   for (var i=0; i < msgArray.length; i++) {
      win2.document.writeln('<B>Error in file:</B> '
+ urlArray[i] + '<BR>')
      win2.document.writeln('<B>Line
number:</B> ' + lnoArray[i] + '<BR>')
      win2.document.writeln('<B>Message:</B> '
+ msgArray[i] + '<P>')
   }
   win2.document.close()
}
</SCRIPT>
<BODY onload="noSuchFunction()">
<FORM>
<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">
<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">
</FORM>

Dieses Beispiel liefert die Ausgabe:

Error Report
Error in file:
file:///c%7C/temp/onerror.html
Line number: 34
Message: unterminated string literal
Error in file: file:///c%7C/temp/onerror.html
Line number:
34
Message: missing ) after argument list
Error in file: file:///c%7C/temp/onerror.html
Line number: 30
Message: noSuchFunction is not defined

Beispiel 4: Ein Event-Handler ruft eine Funktion auf. Im IMG-Tag ruft der onError-Handler die Funktion badImage auf, wenn beim Laden des Bildes Fehler auftreten.

<SCRIPT>
function badImage(theImage) {
   alert('Error: ' + theImage.name + ' did not load properly.')
}
</SCRIPT>
<FORM>
<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">
</FORM>

onfocus

– Den focus auf ein Element setzen. Führt JavaScript-Code aus, wenn das focus-ereignis auftritt; Das heißt, wenn ein Fenster, ein Rahmen oder eine Reihe von Rahmen den focus erhält oder wenn ein Formularelement den focus erhält. Das onfocus-Ereignis tritt auf, wenn ein Element den focus erhält. Das onfocus-Ereignis wird häufig in Eingabefeldern verwendet. Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style und title

Führen Sie JavaScript aus, wenn das Eingabefeld den Fokus erhält:

<input type="text" onfocus="myFunction()">

Hier wird der onFocus-Handler für das valueField-Textarea-Objekt verwendet, um die valueCheck-Funktion aufzurufen.

<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">

onfocusin

Das onfocusin-Ereignis tritt auf, wenn ein Element den Fokus erhält. Das onfocusin-Ereignis wird häufig in Eingabefeldern verwendet. Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style, und title

Führen Sie JavaScript aus, wenn ein Eingabefeld den Fokus erhält:

<input type="text" onfocusin="myFunction()">

onfocusout

Das onfocusout-Ereignis tritt auf, wenn ein Element den Fokus verliert. Das Ereignis onfocusout wird häufig in Eingabefeldern verwendet. Das onfocusout-Ereignis wird häufig während der Formularvalidierung verwendet (wenn der Benutzer das Formularfeld verlässt). Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style, und title

Führen Sie JavaScript aus, wenn ein Eingabefeld kurz davor steht, den Fokus zu verlieren:

<input type="text" onfocusout="myFunction()">

onfullscreenchange

Das fullscreenchange-Ereignis tritt auf, wenn ein Element im Vollbildmodus angezeigt wird. Verwenden Sie die Methode element.requestFullscreen(), um das Element im Vollbildmodus anzuzeigen. Verwenden Sie die Methode element.exitFullscreen(), um den Vollbildmodus abzubrechen. Jeder Browser benötigt ein bestimmtes Präfix (siehe Klammern): 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)

Zeigen Sie Text an, wenn Sie eine Seite im Vollbildmodus anzeigen:

document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});

Verwenden Sie Präfixe für browserübergreifenden Code:

/* Standard-Syntax */
document.addEventListener("fullscreenchange", function() {
  ...
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
  ...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function() {
  ...
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
  ...
});

onfullscreenerror

Das fullscreenerror-Ereignis tritt auf, wenn ein Element trotz Anforderung nicht im Vollbildmodus angezeigt werden kann. Verwenden Sie die Methode element.requestFullscreen(), um das Element im Vollbildmodus anzuzeigen. Verwenden Sie die Methode element.exitFullscreen(), um den Vollbildmodus abzubrechen.

Warntext, wenn das Element nicht im Vollbildmodus angezeigt werden kann:

document.addEventListener("fullscreenerror", function() {
  alert("Fullscreen denied")
});

Verwenden Sie Präfixe für browserübergreifenden Code:

/* Standard-Syntax */
document.addEventListener("fullscreenerror", function() {
  ...
});
/* Firefox */
document.addEventListener("mozfullscreenerror", function() {
  ...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenerror", function() {
  ...
});
/* IE / Edge */
document.addEventListener("msfullscreenerror", function() {
  ...
});

onhashchange

– Ändern der Bindung eines Teils der Adresse. Unterstützung für HTML-Tags: body. Das onhashchange-Ereignis tritt auf, wenn Änderungen am Ankerteil (beginnt mit dem „#“-Zeichen) der aktuellen URL vorgenommen wurden. Ein Beispiel dafür, was der Ankerteil tatsächlich ist: Nehmen wir an, die aktuelle URL lautet http://www.example.com/test.htm#part2 – der Ankerteil dieser URL wäre #part2.
Um dieses Ereignis auszulösen, können Sie:
Ändern Sie den Bindungsteil, indem Sie die Eigenschaft location.hash oder location.href auf das Objekt festlegen Location
Gehen Sie mit einem anderen Lesezeichen zur aktuellen Seite (verwenden Sie die Schaltflächen „Zurück“ oder „Vorwärts“)
Klicken Sie auf den Lesezeichen-Ankerlink

JavaScript ausführen, wenn sich ein Teil des Ankers geändert hat:

<body onhashchange="myFunction()">

So weisen Sie einem Objekt ein „onhashchange“-Ereignis zu window:

window.onhashchange = myFunction;

oninput

– Beginn der Dateneingabe. Das oninput-Ereignis tritt auf, wenn das Element Benutzereingaben empfängt. Dieses Ereignis tritt auf, wenn sich der Wert eines Elements ändert input oder textarea. Dieses Ereignis ähnelt dem onchange-Ereignis. Der Unterschied besteht darin, dass das oninput-Ereignis unmittelbar nach der Wertänderung des Elements auftritt, während onchange auftritt, wenn das Element den Fokus verliert, nachdem sich sein Inhalt geändert hat. Ein weiterer Unterschied besteht darin, dass das onchange-Ereignis auch für Elemente funktioniert select. Unterstützung für HTML-Tags: input type=“color“, input type=“date“, input type=“datetime“, input type=“email“, input type=“month“, input type=“number“, input type=“password“, input type=“range“, input type=“search“, input type=“tel“, input type=“text“, input type=“time“, input type=“url“, input type=“week“ und textarea

Führen Sie JavaScript aus, wenn der Benutzer etwas in ein Feld schreibt input:

<input type="text" oninput="myFunction()">

Bereichsschieberegler – So aktualisieren Sie den Schiebereglerwert dynamisch:

<input type="range" oninput="myFunction(this.value)">

oninvalid

– Der Artikel ist beschädigt. Das oninvalid-Ereignis tritt auf, wenn das gesendete input-element ungültig ist. Beispielsweise ist ein Eingabefeld ungültig, wenn das erforderliche Attribut festgelegt und das Feld leer ist (das erforderliche Attribut gibt an, dass das Eingabefeld ausgefüllt werden muss, bevor das Formular gesendet werden kann). Unterstützung für HTML-Tags: input

Warnung vor Text, wenn das Eingabefeld ungültig ist:

<input type="text" oninvalid="alert('Sie müssen das Formular ausfüllen!');" required>

Warntext, wenn das Eingabefeld weniger als 6 Zeichen enthält:

Имя: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
  alert("Muss 6 oder mehr Zeichen enthalten");
}
</script>

Warntext, wenn das Eingabefeld eine Zahl enthält, die kleiner als 2 oder größer als 5 ist:

Номер: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
  alert("Sie müssen eine Zahl zwischen 2 und 5 wählen. Sie haben gewählt: " + this.value);
}
</script>

onkeydown

– Taste gedrückt. Das onkeydown-Ereignis tritt auf, wenn der Benutzer eine Taste (auf der Tastatur) drückt. Reihenfolge der mit dem onkeydown-Ereignis verbundenen Ereignisse: onkeydown, onkeypress, onkeyup. Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style, und title. Das KeyDown-Ereignis tritt immer vor dem KeyPress-Ereignis auf. Wenn onKeyDown false zurückgibt, wird das KeyPress-Ereignis nicht ausgelöst. Dadurch wird verhindert, dass KeyPress-Ereignisse ausgelöst werden, wenn der Benutzer eine Taste gedrückt hält.

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
layerX, layerY, pageX, pageY, screenX, screenY – Stellt bei einem Over-Window-Ereignis die Position des Cursors zum Zeitpunkt des Auftretens des Ereignisses dar. Stellt bei einem Ereignis über einem Formular die Position des Formularelements dar.
which – ASCII-Wert der gedrückten Taste. Um den tatsächlichen Buchstaben, die Zahl oder das Zeichen der gedrückten Taste abzurufen, verwenden Sie die Methode String.fromCharCode. Um diese Eigenschaft festzulegen, wenn der ASCII-Wert unbekannt ist, verwenden Sie die Methode String.charCodeAt.
modifiers – Enthält eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedrückt wurden.

JavaScript ausführen, wenn der Benutzer eine Taste drückt:

<input type="text" onkeydown="myFunction()">

Verwenden Sie „onkeydown“ mit dem Ereignis „onkeyup“:

<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">

Funktion blockA verwendet, um die über die Tastatur in das Texteingabefeld textentry eingegebenen Zeichen zu berechnen. Wenn der Benutzer „a“ oder „A“ eingibt, gibt die Funktion „false“ zurück und das Textfeld zeigt den Wert nicht an. In dieser Funktion ist die Eigenschaft which Das Ereignis weist den ASCII-Wert der vom Benutzer gedrückten Taste der Variable keyChar zu. Operator if berechnet keyChar und gibt zurück false für bestimmte Zeichen:

<form name="main">
   <input name="textentry"
type=text size=10 maxlength=10>
</form>
<script>
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
return false;
}
document.main.textentry.onkeydown = blockA;
</script>

onkeypress

– Eine Taste wird gedrückt und dann losgelassen. Führt JavaScript-Code aus, wenn das KeyPress-Ereignis auftritt; das heißt, wenn der Benutzer die Taste gedrückt hält. Das onkeypress-Ereignis tritt auf, wenn der Benutzer eine Taste (auf der Tastatur) drückt. Das onkeypress-Ereignis wird nicht für alle Tasten (z. B. ALT, STRG, UMSCHALT, ESC) in allen Browsern ausgelöst. Um nur zu erkennen, ob der Benutzer eine Taste gedrückt hat, verwenden Sie stattdessen das Ereignis onkeydown, da es für alle Tasten funktioniert. Reihenfolge der mit dem onkeydown-Ereignis verbundenen Ereignisse: onkeydown, onkeypress, onkeyup. Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style, und title. Das KeyPress-Ereignis wird nur dann unmittelbar nach dem KeyDown-Ereignis ausgelöst, wenn onKeyDown etwas anderes zurückgibt als false. Das KeyPress-Ereignis tritt wiederholt auf, bis der Benutzer die Taste loslässt. Sie können einzelne KeyPress-Ereignisse abbrechen.

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
layerX, layerY, pageX, pageY, screenX, screenY – Bei einem Ereignis stellt der obere Rand des Fensters die Position des Cursors zum Zeitpunkt des Auftretens des Ereignisses dar. Stellt bei einem Überformereignis die Position eines Formularelements dar.
which – ASCII-Wert der gedrückten Taste. Um den tatsächlichen Buchstaben, die Zahl oder das Zeichen der gedrückten Taste abzurufen, verwenden Sie die Methode String.fromCharCode. Um diese Eigenschaft festzulegen, wenn der ASCII-Wert unbekannt ist, verwenden Sie die Methode String.charCodeAt.
modifiers – Enthält eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedrückt wurden.

JavaScript ausführen, wenn der Benutzer eine Taste drückt:

<input type="text" onkeypress="myFunction()">

Hier erfasst die Methode „captureEvents“ Tastatureingaben und der Handler „onKeyPress“ ruft die Funktion „blockA“ auf, um nach Tastendrücken zu suchen. Wenn die Tasten „a“ oder „z“ gedrückt werden, scrollt die Funktion durch das Fenster Navigator‘.

function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
self.scrollBy(10,10);
else if(keyChar == 'Z' || keyChar == 'z')
self.scrollBy(-10,-10);
else return false;
}
document.captureEvents(Event.KEYPRESS);
document.onkeypress = blockA;

onkeyup

– Taste losgelassen Das onkeyup-Ereignis tritt auf, wenn der Benutzer eine Taste (auf der Tastatur) loslässt. Reihenfolge der mit dem onkeydown-Ereignis verbundenen Ereignisse: onkeydown, onkeypress, onkeyup. Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style, und title.

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
layerX, layerY, pageX, pageY, screenX, screenY – Bei einem Ereignis stellt der obere Rand des Fensters die Position des Cursors zum Zeitpunkt des Auftretens des Ereignisses dar. Stellt bei einem Überformereignis die Position eines Formularelements dar.
which – ASCII-Wert der gedrückten Taste. Um den tatsächlichen Buchstaben, die Zahl oder das Zeichen der gedrückten Taste abzurufen, verwenden Sie die Methode String.fromCharCode. Um diese Eigenschaft festzulegen, wenn der ASCII-Wert unbekannt ist, verwenden Sie die Methode String.charCodeAt.
modifiers – Enthält eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedrückt wurden.

Führen Sie JavaScript aus, wenn der Benutzer die Taste loslässt:

<input type="text" onkeyup="myFunction()">

Verwenden Sie „onkeydown“ mit dem Ereignis „onkeyup“:

<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">

Geben Sie den tatsächlich ausgegebenen Schlüssel im Textfeld aus:

Введите свое имя: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
  var x = document.getElementById("fname").value;
  document.getElementById("demo").innerHTML = x;
}
</script>

Hier erfasst die Methode „captureEvents“ Tastatureingaben und der Handler „onKeyUp“ ruft die Funktion „Key_Up“ auf. Die alert-methode der Funktion öffnet ein Dialogfeld, um den Wert der gedrückten Taste anzuzeigen:

function Key_Up(e) {
var keyChar = String.fromCharCode(e.which);
alert("Hold '" + keyChar +"' again for me, okay?");
}
document.onkeyup=Key_Up;
document.captureEvents(Event.KEYUP);

onload

– Artikel geladen. Das Onload-Ereignis tritt auf, wenn ein Objekt geladen wurde. Das onload-Ereignis wird am häufigsten für das Body-Element verwendet, um ein Skript auszuführen, nachdem die Webseite den gesamten Inhalt (einschließlich Bilder, Skriptdateien, CSS-Dateien usw.) vollständig geladen hat. Mithilfe des onload-Ereignisses kann der Browsertyp und die Browserversion des Besuchers überprüft und anhand der erhaltenen Informationen die entsprechende Version der Webseite geladen werden. Das onload-Ereignis kann auch zur Verarbeitung von Cookies verwendet werden.

Der onLoad-Handler wird im BODY- oder FRAMESET-Tag verwendet, zum Beispiel BODY onLoad=“…“. Für FRAMESET- und FRAME-Tags: Das onLoad-Handler-Ereignis im Frame (im BODY-Tag platziert) tritt vor dem onLoad des FRAMESET-Tags (im FRAMESET-Tag platziert) auf. Für Bilder gibt der onLoad-Handler das Skript an, das bei der Ausgabe des Bildes ausgeführt werden soll. Verwechseln Sie die Bildausgabe nicht mit dem Hochladen von Bildern. Sie können mehrere Bilder laden und sie dann einzeln im selben Image-Objekt anzeigen, indem Sie die src-Eigenschaft des Objekts festlegen. Wenn Sie die Bildausgabe auf diese Weise ändern, wird onLoad bei jeder Bildausgabe ausgeführt, nicht nur, wenn die Bilder in den Speicher geladen werden.

Wenn Sie einen onLoad-Handler für ein Image-Objekt angeben, das ein Schleifen-GIF (Mehrbild-GIF) ausgibt, enthält jede Animationsschleife einen onLoad-Handler, und der Handler wird einmal für jede Schleife ausgeführt. Sie können den onLoad-Handler verwenden, um eine JavaScript-Animation zu erstellen, indem Sie die src-Eigenschaft des Image-Objekts wiederholt festlegen.

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
width, height – Für ein Ereignis über einem Fenster, aber nicht über einer Ebene, stellen diese Eigenschaften die Breite und Höhe des Fensters dar.

Führen Sie JavaScript sofort nach dem Laden der Seite aus:

<body onload="myFunction()">

Verwenden Sie in JavaScript die Methode addEventListener():

object.addEventListener("load", myScript);

Zeigt eine Nachricht an, wenn die Seite geladen wird. Hier gibt der onLoad-Handler eine Begrüßung aus, nachdem die Seite geladen wurde.

<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>

Beim Laden eines Bildes eine Meldung anzeigen. Hier werden zwei Image-Objekte erstellt: eines durch den Image-Konstruktor und das zweite durch das IMG-Tag. Jedes Image-Objekt verfügt über einen onLoad-Handler, der die displayAlert-Funktion aufruft, die eine Meldung anzeigt. Für ein Bild, das durch ein IMG-Tag erstellt wurde, zeigt das Warndialogfeld den Bildnamen an. Für ein vom Bildkonstruktor erstelltes Bild zeigt die Warnung eine Meldung ohne den Bildnamen an. Dies liegt daran, dass der onLoad-Handler für das vom Image-Konstruktor erstellte Objekt der Name einer Funktion sein muss und keine Parameter für die displayAlert-Funktion angeben kann.

<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert
imageA.src="cyanball.gif"
function displayAlert(theImage) {
   if (theImage==null) {
      alert('An image loaded')
   }
   else alert(theImage.name + ' has been loaded.')
}
</SCRIPT>
<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>

GIF-Animationsausgabe cycles in Schleife. Das hier angezeigte Bild ist „birdie.gif“, ein animiertes GIF-Bild. Der onLoad-Handler erhöht die cycles-Variable, die die Anzahl der Animationszyklen cycles verfolgt. Um den Wert der Zyklen anzuzeigen, klickt der Benutzer auf die Schaltfläche Count Loops.

<SCRIPT>
var cycles=0
</SCRIPT>
<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">
<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">

Ändern Sie die angezeigte GIF-Animation. In diesem Beispiel wird der onLoad-Handler verwendet, um sechs GIF-Animationen zu drehen. Jede Animation wird als Folge einzelner Bildobjekte Image angezeigt. Beim Laden des Dokuments wird !anim0.html ausgegeben. Wenn diese Animation abgeschlossen ist, veranlasst der onLoad-Handler, dass die nächste Datei, !anim1.html, anstelle der ersten Datei geladen wird. Nachdem die letzte Animation, !anim5.html, abgeschlossen ist, wird die erste Datei erneut angezeigt. Beachten Sie, dass sich die Funktion „changeAnimation“ nicht selbst aufruft, nachdem die Eigenschaft „src“ des Objekts „Image“ geändert wurde. Dies geschieht, weil die src-Eigenschaft geändert wird, der onLoad-Handler des Bildes aktiviert ist und die Funktion „changeAnimation“ aufgerufen wird.

<SCRIPT>
var whichImage=0
var maxImages=5
function changeAnimation(theImage) {
   ++whichImage
   if (whichImage <= maxImages) {
      var imageName="!anim" + whichImage + ".gif"
      theImage.src=imageName
   } else {
      whichImage=-1
      return
   }
}
</SCRIPT>
<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">

Verwenden Sie das onload-Ereignis für das img-Element. Benachrichtigung „Bild geladen“ unmittelbar nach dem Laden des Bildes:

<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

Verwenden Sie das onload-Ereignis, um Cookies zu verarbeiten:

<body onload="checkCookies()">
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies aktiviert.";
  } else {
     text = "Cookies sind nicht aktiviert.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

onloadeddata

– Dateidaten geladen. Handler für das loadedlata-Ereignis, das auftritt, wenn das Audio/Video bereits an der aktuellen Position abgespielt werden kann, Mediendaten jedoch weiterhin geladen werden. Das onloadeddata-Ereignis tritt auf, wenn der Medienrahmen geladen wird, garantiert jedoch nicht, dass genügend Daten verfügbar sind, um mit der Wiedergabe zu beginnen. Das onloadeddata-Ereignis tritt nach onloadedmetadata und vor oncanplay auf.

Wenn Medien geladen werden, treten 7 Ereignisse in der folgenden Reihenfolge auf:
1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough

JavaScript ausführen, wenn Daten für den aktuellen Frame verfügbar sind (für Video):

<video onloadeddata="myFunction()">

JavaScript ausführen, wenn Daten für den aktuellen Frame verfügbar sind (für Audio):

<audio onloadeddata="myFunction()">

onloadedmetadata

– Dateimetadaten geladen. Handler für das Ereignis „loadedmetadata“, das auftritt, wenn Metadaten (Dauer, Bildabmessungen (für Video) und Titeltext) für die angegebene Audio-/Videodatei geladen wurden. Das onloadedmetadata-Ereignis tritt auf, wenn Metadaten für das Medium geladen wurden.

Metadaten für Audio oder Video bestehen aus:
Dauer
Abmessungen (Video)
Spuren

Führen Sie JavaScript aus, wenn Sie Videometadaten laden:

<video onloadedmetadata="myFunction()">

В JavaScript:

object.onloadedmetadata = function(){myScript};

Verwenden Sie in JavaScript die Methode addEventListener():

object.addEventListener("loadedmetadata", myScript);

onloadstart

– Beginnen Sie mit dem Laden des Elements. Handler für das loadstart-Ereignis, das auftritt, wenn der Ladevorgang einer Audio-/Videodatei beginnt.

onmessage

– Meldung erscheint. Das onmessage-Ereignis tritt auf, wenn eine Nachricht über eine Ereignisquelle empfangen wird. Das Ereignisobjekt für das onmessage-Ereignis unterstützt die folgenden Eigenschaften:
Daten – Enthält die eigentliche Nachricht
origin — URL des Dokuments, das das Ereignis ausgelöst hat.
LastEventId — ID der letzten im Ereignisstrom gesehenen Nachricht.
Verwandte Veranstaltungen:
onopen – tritt auf, wenn die Verbindung zum Server geöffnet ist.
onerror – Tritt auf, wenn ein Problem auftritt

Erstellen Sie ein neues EventSource-Objekt und geben Sie die URL der Seite an, die die Aktualisierungen sendet. Jedes Mal, wenn ein Update empfangen wird, tritt das onmessage-Ereignis auf. Wenn das onmessage-Ereignis auftritt, platzieren Sie die empfangenen Daten in einem div-Element mit id=“myDIV“:

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("myDIV").innerHTML += event.data + "<br>";
};

onmousedown

– Maustaste gedrückt wird. Handler für das Mousedown-Ereignis, das auftritt, wenn die linke Maustaste gedrückt wird. Der Unterschied zum Click-Ereignis besteht darin, dass Click eine Kombination der Mousedown- und Mouseup-Ereignisse ist. Führt JavaScript-Code aus, wenn das MouseDown-Ereignis auftritt; das heißt, wenn der Benutzer eine Maustaste drückt. Wenn onMouseDown zurückkehrt false, Standardaktion (Eingabemodus drag, Eingabemodus selection oder Hyperlink-Aktivierung) wird abgebrochen. Die Aktivierung wird durch das MouseDown-Ereignis auf dem Hyperlink ausgelöst. Wenn der Link aktiviert ist, ändert er seine Farbe, um den neuen Status anzuzeigen. Die Standardaktion variiert: Ziehen, Textauswahl, Scrollen oder Zoomen (kombiniert mit Raddrücken, sofern unterstützt)

Das onmousedown-Ereignis tritt auf, wenn der Benutzer die Maustaste über einem HTML-Element drückt. Reihenfolge der Ereignisse für die linke und mittlere Maustaste:
onmousedown
onmouseup
auf Klick
Reihenfolge der Ereignisse für die rechte Maustaste:
onmousedown
onmouseup
oncontextmenu

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
layerX, layerY, pageX, pageY, screenX, screenY- Die Position des Cursors, wenn das MouseDown-Ereignis auftritt.
which – Stellt 1 für einen linken Mausklick und 3 für einen rechten Mausklick dar.
modifiers – Enthält eine Liste der Modifizierertasten, die beim Auftreten des MouseDown-Ereignisses gedrückt wurden.

Rufen Sie eine Funktion auf, wenn die Maustaste über einem Absatz gedrückt wird:

<p onmousedown="myFunction()">Click the text!</p>

Hier kann der Benutzer das Bild auf der HTML-Seite verschieben, indem er es mit der Maus zieht. Ihr HTML-Code definiert ein Bild und positioniert es in einer Ebene namens „container1“. Im JavaScript-Code legen Ereignishandler die Positionierungseigenschaften von Container1 fest, wenn der Benutzer das Bild zieht und so eine Animation erstellt. Das ID-Attribut des P-Elements, das das Bild enthält, wird auf „container1“ gesetzt, sodass „container1“ eine eindeutige Kennung für den Absatz und das Bild ist. Das STYLE-Tag erstellt eine Ebene für Container1 und positioniert diese. Der folgende JavaScript-Code definiert die Handler onMouseDown, onMouseUp und onMouseMove. Mithilfe von Stylesheets wird das Bild zunächst wie folgt definiert und positioniert:

<HEAD>
<STYLE type="text/css">
   #container1 {
position:absolute; left:200; top:200}
</STYLE>
</HEAD>
<BODY>
<P ID="container1">
<img src="backgrnd.gif" name="myImage" width=96 height=96>
</P>
</BODY>

In diesem Code erfasst die Methode „captureEvents“ die Ereignisse „MouseUp“ und „MouseDown“. Zur Behandlung dieser Ereignisse werden jeweils die Funktionen DRAG_begindrag und DRAG_enddrag aufgerufen. Wenn der Benutzer die linke Maustaste drückt, startet die Funktion DRAG_begindrag, die MouseMove-Ereignisse erfasst und die Funktion DRAG_drag anweist, diese zu verarbeiten. Anschließend weist es den Wert der pageX-Eigenschaft des MouseDown-Ereignisses der DRAG_lastX-Eigenschaft, den Wert der pageY-Eigenschaft der DRAG_lastY-Eigenschaft und true der DRAG_dragging-Eigenschaft zu. Die Funktion DRAG_drag wertet DRAG_dragging aus, um sicherzustellen, dass das MouseMove-Ereignis von der Funktion DRAG_begindrag erfasst wurde, verwendet dann die Methode moveBy, um das Objekt zu positionieren und weist den Eigenschaften DRAG_lastX und DRAG_lastY Werte zu. Wenn der Benutzer die linke Maustaste loslässt, stoppt die DRAG_enddrag-Funktion die Erfassung von MouseMove-Ereignissen. DRAG_enddrag stellt dann sicher, dass keine anderen Funktionen aufgerufen werden, indem onmousemove auf Null und DRAG_dragging auf gesetzt wird false.

<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;
var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {
window.captureEvents(Event.MOUSEMOVE);
      window.onmousemove=DRAG_drag;
DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {
/*Hier finden Sie einige Arbeiten zum Umgang mit rechten Mausklicks*/
return true;
}
}
function DRAG_enddrag(e) {
if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
      window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {
/*Hier finden Sie einige Arbeiten zum Umgang mit rechten Mausklicks*/
return true;
}
}
function DRAG_drag(e) {
if (DRAG_dragging) {
/*Diese Funktion wird nur aufgerufen, wenn MOUSEMOVE erfasst wird*/
moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;
return false;
}
else {
return true;
}
}
</SCRIPT>

onmouseenter

– Der Mauszeiger befindet sich über einem Element. Ein Handler für das mouseenter-Ereignis, das auftritt, wenn der Mauszeiger in den Bereich des Elements eintritt. Im Gegensatz zum mouseover entsteht beim mouseenter-Ereignis keine Blase („Bubble“), das heißt, es tritt nicht auf, wenn der Mauszeiger auf ein untergeordnetes Element des angegebenen Elements trifft. Das Ereignis onmouseenter tritt auf, wenn der Mauszeiger ein Element betritt. Das Ereignis onmouseenter wird häufig in Verbindung mit dem Ereignis onmouseleave verwendet, das auftritt, wenn der Mauszeiger ein Element verlässt. Das onmouseenter-Ereignis ähnelt dem onmouseover-Ereignis. Der Unterschied besteht darin, dass das onmouseenter-Ereignis nicht in die Luft sprudelt (es breitet sich nicht in der Dokumenthierarchie nach oben aus).

An jedes Element der Hierarchie wird beim Betreten ein mouseenter-Ereignis gesendet. Hier werden 4 Ereignisse an die vier Elemente der Hierarchie gesendet, wenn der Zeiger den Text erreicht. Ein einzelnes mouseover-Ereignis wird an das tiefste Element des DOM-Baums gesendet und sprudelt dann in der Hierarchie nach oben, bis es von einem Handler abgebrochen wird oder die Wurzel erreicht. Bei einer tiefen Hierarchie kann die Anzahl der gesendeten mouseover-Ereignisse recht groß sein und erhebliche Leistungsprobleme verursachen. In solchen Fällen ist es besser, mit mouseenter-Ereignissen umzugehen. In Kombination mit dem entsprechenden mouseleave-Ereignis (das auf ein Element ausgelöst wird, wenn die Maus den Inhaltsbereich verlässt) verhält sich das mouseenter-Ereignis sehr ähnlich wie die CSS:hover-Pseudoklasse.

Rufen Sie eine Funktion auf, wenn Sie mit der Maus über ein Bild fahren:

<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">

JavaScript:

object.onmouseenter = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseenter", myScript);

Dieses Beispiel zeigt den Unterschied zwischen den Ereignissen onmousemove, onmouseenter und mouseover:

<div onmousemove="myMoveFunction()">
  <p id="demo1">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
  <p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
  <p id="demo3">I will demonstrate onmouseover!</p>
</div>

Das folgende triviale Beispiel verwendet das Ereignis „mouseenter“, um den Rand eines div-Elements zu ändern, wenn die Maus in den zugewiesenen Bereich eintritt. Anschließend wird der Liste ein Element mit der Ereignisnummer „mouseenter“ oder „mouseleave“ hinzugefügt.

<SCRIPT>
var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");
mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem("This is mouseenter event " + enterEventCount + ".");
});
mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333";
  leaveEventCount++;
  addListItem("This is mouseleave event " + leaveEventCount + ".");
});
function addListItem(text) {
  // Erstellen Sie einen neuen Textknoten mit dem bereitgestellten Text
  var newTextNode = document.createTextNode(text);
  // Erstellen Sie ein neues Element li
  var newListItem = document.createElement("li");
  // Fügen Sie einem Element einen Textknoten hinzu li
  newListItem.appendChild(newTextNode);
  // Fügen Sie das neu erstellte Listenelement zur Liste hinzu
  unorderedList.appendChild(newListItem);
}
<SCRIPT>
<style>
#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333;
}
</style>
<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>

onmouseleave

– Der Mauszeiger hat das Element verlassen. Ein Handler für das mouseleave-Ereignis, das auftritt, wenn der Mauszeiger den Bereich des Elements verlässt. Im Gegensatz zu mouseout entsteht beim mouseEnter-Ereignis keine Blase („Blase“), das heißt, es tritt nicht auf, wenn der Mauszeiger auf ein untergeordnetes Element des angegebenen Elements trifft. Das onmouseleave-Ereignis tritt auf, wenn der Mauszeiger das Element verlässt. Das onmouseleave-Ereignis wird häufig in Verbindung mit dem onmouseenter-Ereignis verwendet, das auftritt, wenn der Mauszeiger ein Element betritt. Das onmouseleave-Ereignis ähnelt dem onmouseout-Ereignis. Der Unterschied besteht darin, dass das onmouseleave-Ereignis nicht in die Luft sprudelt (sich nicht in der Dokumenthierarchie nach oben ausbreitet).

Das mouseleave-Ereignis wird ausgelöst, wenn sich der Cursor eines Manipulators (normalerweise einer Maus) außerhalb der Grenzen eines Elements bewegt. mouseleave und mouseout sind ähnlich, unterscheiden sich jedoch darin, dass mouseleave im Gegensatz zu mouseout nicht angezeigt wird. Das bedeutet, dass „mouseleave“ ausgelöst wird, wenn der Cursor die Grenzen eines Elements und aller seiner untergeordneten Elemente verlässt, während „mouseout“ ausgelöst wird, wenn der Cursor die Grenzen eines Elements oder eines seiner untergeordneten Elemente verlässt (auch wenn sich der Cursor noch innerhalb des Elements befindet).

Rufen Sie eine Funktion auf, wenn sich der Mauszeiger außerhalb des Bildes bewegt:

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">

JavaScript:

object.onmouseleave = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseleave", myScript);

Dieses Beispiel zeigt den Unterschied zwischen den Ereignissen onmousemove, onmouseleave und onmouseout:

<div onmousemove="myMoveFunction()">
  <p id="demo1">I will demonstrate onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p id="demo2">I will demonstrate onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
  <p id="demo3">I will demonstrate onmouseout!</p>
</div>

Die mouseout-Dokumentation enthält ein Beispiel, das den Unterschied zwischen mouseout und mouseleave veranschaulicht. Das folgende Beispiel zeigt, wie Sie mit mouseout das Delegationsprinzip des mouseleave-Ereignisses simulieren.

<ul id="test">
  <li>
    <ul class="leave-sensitive">
      <li>item 1-1</li>
      <li>item 1-2</li>
    </ul>
  </li>
  <li>
    <ul class="leave-sensitive">
      <li>item 2-1</li>
      <li>item 2-2</li>
    </ul>
  </li>
</ul>
<script>
  var delegationSelector = ".leave-sensitive";
  document.getElementById("test").addEventListener(
    "mouseout",
    function (event) {
      var target = event.target,
        related = event.relatedTarget,
        match;
      // search for a parent node matching the delegation selector
      while (
        target &&
        target != document &&
        !(match = matches(target, delegationSelector))
      ) {
        target = target.parentNode;
      }

      // exit if no matching node has been found
      if (!match) {
        return;
      }
      // loop through the parent of the related target to make sure that it's not a child of the target
      while (related && related != target && related != document) {
        related = related.parentNode;
      }
      // exit if this is the case
      if (related == target) {
        return;
      }
      // the "delegated mouseleave" handler can now be executed
      // change the color of the text
      target.style.color = "orange";
      // reset the color after a small amount of time
      setTimeout(function () {
        target.style.color = "";
      }, 500);
    },
    false,
  );
  // function used to check if a DOM element matches a given selector
  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
  function matches(elem, selector) {
    // the matchesSelector is prefixed in most (if not all) browsers
    return elem.matchesSelector(selector);
  }
</script>

onmousemove

– Der Mauszeiger wird über das Element bewegt. Handler für das mousemove-Ereignis, das auftritt, wenn der Mauszeiger über ein Element bewegt wird.
type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
layerX, layerY, pageX, pageY, screenX, screenY – Die Position des Cursors, als das Ereignis auftrat MouseMove.

JavaScript:

object.onmousemove = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mousemove", myScript);

Rufen Sie eine Funktion auf, wenn Sie mit der Maus über ein div-Element fahren:

<div onmousemove="myFunction()">Move the cursor over me</div>

Im folgenden Beispiel werden die Ereignisse „mousedown“, „mousemove“ und „mouseup“ verwendet, um dem Benutzer das Zeichnen auf der HTML-Zeichenfläche zu ermöglichen. Die Funktionsweise ist einfach: Die Linienstärke ist auf 1 eingestellt und die Farbe ist immer Schwarz. Wenn die Seite geladen wird, werden die Konstanten myPics und context erstellt, um einen Verweis auf die Leinwand und den 2D-Kontext zu speichern, die wir zum Zeichnen verwenden. Das Zeichnen beginnt, wenn das mousedown-Ereignis ausgelöst wird. Wir speichern zunächst die x- und y-Koordinaten des Mauszeigers in x- und y-Variablen und setzen dann isDrawing auf true. Wenn sich der Mauszeiger über die Seite bewegt, wird das mousemove-Ereignis ausgelöst. Wenn isDrawing wahr ist, ruft der Ereignishandler die Funktion drawLine auf, um eine Linie von den gespeicherten x- und y-Werten zur aktuellen Position zu zeichnen. Wenn die Funktion drawLine() zurückkehrt, passen wir die Koordinaten an und speichern sie dann in x- und y-Koordinaten. Das mouseup-Ereignis zeichnet das letzte Liniensegment, setzt x und y auf 0 und stoppt das weitere Zeichnen, indem es isDrawing auf setzt false.

<script>
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener("mousedown", (e) => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
});
myPics.addEventListener("mousemove", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});
window.addEventListener("mouseup", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});
function drawLine(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = "black";
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}
</script>
<style>
canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}
</style>
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>

onmouseout

– Der Mauszeiger bewegt sich aus dem Element heraus. Ein Handler für das mouseout-Ereignis, das auftritt, wenn sich der Mauszeiger außerhalb eines Elements bewegt. Führt JavaScript-Code aus, wenn das mouseOut-Ereignis auftritt; Das heißt, jedes Mal, wenn der Mauszeiger den Bereich (in der Client-Imagemap) oder den Hyperlink verlässt. Wenn sich der Mauszeiger von einem Bereich der Client-Imagemap in einen anderen bewegt, erhalten Sie zunächst onMouseOut für den ersten Bereich und dann onMouseOver für den zweiten Bereich. Area-Tags, die onMouseOut verwenden, müssen über ein HREF-Attribut im AREA-Tag verfügen. Sie müssen im Ereignishandler „true“ zurückgeben, wenn Sie die Eigenschaften „status“ oder „defaultStatus“ mithilfe von onMouseOver festlegen möchten.

Das onmouseout-Ereignis tritt auf, wenn sich der Mauszeiger außerhalb eines Elements bewegt. Das Ereignis „onmouseout“ wird häufig in Verbindung mit dem Ereignis „onmouseover“ verwendet, das auftritt, wenn Sie mit der Maus über ein Element fahren. Das onmouseout-Ereignis ähnelt dem onmouseleave-Ereignis. Der Unterschied besteht darin, dass das onmouseleave-Ereignis nicht in die Luft sprudelt (sich nicht in der Dokumenthierarchie nach oben ausbreitet).

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
layerX, layerY, pageX, pageY, screenX, screenY – Die Position des Cursors, wenn das MouseOut-Ereignis auftritt

Rufen Sie eine Funktion auf, wenn sich der Mauszeiger außerhalb des Bildes bewegt:

<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">

Das folgende Beispiel veranschaulicht den Unterschied zwischen den Ereignissen „mouseout“ und „mouseleave“. Das mouseleave-Ereignis wird zur UL hinzugefügt, um die Liste jedes Mal lila zu färben, wenn die Maus die UL verlässt. mouseout wird zur Liste hinzugefügt, um das Zielelement orange zu färben, wenn die Maus es verlässt. Wenn Sie dies versuchen, werden Sie feststellen, dass mouseout an einzelne Listenelemente und mouseleave an die gesamte Liste übergeben wird, dank der Elementhierarchie und der Tatsache, dass Listenelemente die Basis-UL verbergen.

<script>
const test = document.getElementById("test");
// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener(
  "mouseleave",
  (event) => {
    // highlight the mouseleave target
    event.target.style.color = "purple";

    // reset the color after a short delay
    setTimeout(() => {
      event.target.style.color = "";
    }, 1000);
  },
  false,
);
// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener(
  "mouseout",
  (event) => {
    // highlight the mouseout target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);
</script>
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

onmouseover

– Der Mauszeiger bewegt sich über das Element. Ein Handler für das mouseover-Ereignis, das auftritt, wenn der Mauszeiger über ein Element bewegt wird. Das onmouseover-Ereignis tritt auf, wenn der Mauszeiger ein Element betritt. Das onmouseover-Ereignis wird häufig in Verbindung mit dem onmouseout-Ereignis verwendet, das auftritt, wenn der Mauszeiger ein Element verlässt. Das onmouseover-Ereignis ähnelt dem onmouseenter-Ereignis. Der Unterschied besteht darin, dass das onmouseenter-Ereignis nicht in die Luft sprudelt (also nicht in der Dokumenthierarchie nach oben propagiert). Das mouseover-Ereignis wird für ein Element ausgelöst, wenn ein Zeigegerät (z. B. eine Maus oder ein Trackpad) verwendet wird, um den Cursor über das Element oder eines seiner untergeordneten Elemente zu bewegen.

Rufen Sie eine Funktion auf, wenn Sie mit der Maus über ein Bild fahren:

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

Standardmäßig wird der HREF-Wert eines Ankers in der Statusleiste unten im Browser angezeigt, wenn der Benutzer mit der Maus über den Anker fährt. Im folgenden Beispiel zeigt onMouseOver eine spezielle Meldung an „Click this if you dare.“

<A HREF="http://home.netscape.com/" onMouseOver="window.status='Click this if you dare!'; return true">Click me</A>

onmouseup

– die Maustaste wird über dem Element losgelassen. Ein Handler für das Mouseup-Ereignis, das auftritt, wenn die Maustaste auf einem Element losgelassen wird. Wenn onMouseUp „false“ zurückgibt, wird die Standardaktion abgebrochen. Wenn onMouseUp beispielsweise false zurückgibt, wenn ein Hyperlink aktiv ist, ist der Link nicht enthalten. Wenn also MouseUp auftritt, während der Hyperlink inaktiv ist (z. B. wenn onMouseDown false zurückgibt), ist der Link nicht enthalten. Die Aktivierung wird durch das MouseDown-Ereignis auf dem Link verursacht. Wenn der Link aktiv ist, ändert er seine Farbe, um den neuen Status anzuzeigen. Das Ereignis onmouseup tritt auf, wenn die Maustaste über einem Element losgelassen wird.

Das Mouseup-Ereignis wird für ein Element ausgelöst, wenn eine Taste auf einem Zeigegerät (z. B. einer Maus oder einem Trackpad) losgelassen wird, während sich der Zeiger darin befindet. Mouseup-Ereignisse sind das Gegenteil von Mousedown-Ereignissen.

Reihenfolge der Ereignisse für die linke und mittlere Maustaste:
onmousedown
onmouseup
auf Klick
Reihenfolge der Ereignisse für die rechte Maustaste:
onmousedown
onmouseup
oncontextmenu

type – Gibt den Ereignistyp an.
target – Gibt das Objekt an, an das das Ereignis ursprünglich gesendet wurde.
layerX, layerY, pageX, pageY, screenX, screenY – Die Position des Cursors, wenn das MouseUp-Ereignis auftritt.
which – Stellt 1 für die linke Taste und 3 für die rechte Maustaste dar.
modifiers – Enthält eine Liste der Modifizierertasten, die beim Auftreten des MouseUp-Ereignisses gedrückt wurden.

Rufen Sie eine Funktion auf, wenn die Maustaste über einem Absatz losgelassen wird:

<p onmouseup="mouseUp()">Click the text!</p>

onmousewheel (onwheel)

– Das Mausrad wird verwendet. Ein Handler wheel für das Radereignis, das auftritt, wenn das Mausrad auf einem Element vorwärts oder rückwärts gescrollt wird. Das Onwheel-Ereignis tritt auf, wenn das Mausrad über ein Element bewegt wird. Das Onwheel-Ereignis tritt auch auf, wenn der Benutzer mit dem Touchpad durch die Seite scrollt. Dieses Ereignis ersetzt das nicht standardmäßige veraltete Mausradereignis. Verwechseln Sie das Wheel-Ereignis nicht mit dem Scroll-Ereignis. Das Wheel-Ereignis löst nicht unbedingt ein Scroll-Ereignis aus. Beispielsweise ist das Element möglicherweise überhaupt nicht scrollbar. Zoomaktionen mit dem Rad oder Trackpad lösen ebenfalls Radereignisse aus. Das Scroll-Ereignis wird nicht unbedingt durch das Wheel-Ereignis ausgelöst. Elemente können auch mit der Tastatur, durch Ziehen der Bildlaufleiste oder mithilfe von JavaScript gescrollt werden.

Auch wenn das Radereignis einen Bildlauf auslöst, spiegeln die Delta*-Werte im Radereignis nicht unbedingt die Richtung wider, in die der Inhalt scrollt. Verlassen Sie sich daher nicht auf die Delta*-Eigenschaften des Radereignisses, um die Bildlaufrichtung zu ermitteln. Erkennen Sie stattdessen Änderungen in den ScrollLeft- und ScrollTop-Werten des Ziels im Scroll-Ereignis.

Das Wheel-Ereignis kann abgebrochen werden. Wenn das Ereignis abgebrochen wird, erfolgt kein Scrollen oder Zoomen. Dies kann zu Leistungsproblemen führen, da der Browser auf die Verarbeitung jedes Radereignisses warten muss, bevor er tatsächlich durch den Inhalt scrollt. Dies kann vermieden werden, indem beim Aufruf von addEventListener() passiv: true festgelegt wird, was dazu führen kann, dass der Browser nicht stornierbare Wheel-Ereignisse generiert.

Wenn der Benutzer mit dem Mausrad über ein Div scrollt, ändern Sie dessen Schriftgröße:

document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
  this.style.fontSize = "35px";
}

Dieses Beispiel zeigt, wie man ein Element mit dem Mausrad (oder einem anderen Zeigegerät) skaliert.

<script>
function zoom(event) {
  event.preventDefault();
  scale += event.deltaY * -0.01;
  // Restrict scale
  scale = Math.min(Math.max(0.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
</script>
<style>
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}
</style>
<div>Scale me with your mouse wheel.</div>

onoffline

– Der Browser läuft im Offline-Modus. Das onoffline-Ereignis tritt auf, wenn der Browser offline geht. Das Online-Event ist das Gegenteil des Online-Events.

Rufen Sie die Funktion auf, wenn der Browser offline geht:

<body onoffline="myFunction()">

ononline

– Der Browser wird im Online-Modus gestartet. Das ononline-Ereignis tritt auf, wenn der Browser online geht. Eine Online-Veranstaltung ist das Gegenteil einer onoffline-Veranstaltung.

Rufen Sie die Funktion auf, wenn der Browser online startet:

<body ononline="myFunction()">

onpagehide

– Der Benutzer navigiert von der Seite weg. Das onpagehide-Ereignis tritt auf, wenn der Benutzer eine Webseite verlässt. Es gibt mehrere Möglichkeiten, von einer Seite weg zu navigieren. Zum Beispiel. Klicken auf einen Link, Aktualisieren der Seite, Absenden eines Formulars, Schließen des Browserfensters usw. Das onpagehide-Ereignis wird manchmal anstelle des onunload-Ereignisses verwendet, da das onunload-Ereignis dazu führt, dass die Seite nicht zwischengespeichert wird. Um herauszufinden, ob eine Seite direkt vom Server geladen oder zwischengespeichert wird, können Sie die persisted Eigenschaft des PageTransitionEvent-Objekts verwenden. Diese Eigenschaft gibt „true“ zurück, wenn die Seite vom Browser zwischengespeichert wird, andernfalls „false“.

Rufen Sie die Funktion auf, wenn der Benutzer die Webseite verlässt:

<body onpagehide="myFunction()">

onpageshow

– Der Benutzer navigiert zur Seite. Das onpageshow-Ereignis tritt auf, wenn der Benutzer zu einer Webseite navigiert. Das onpageshow-Ereignis ähnelt dem onload-Ereignis, außer dass es nach dem onload-Ereignis auftritt, wenn die Seite zum ersten Mal geladen wird. Außerdem tritt das onpageshow-Ereignis jedes Mal auf, wenn die Seite geladen wird, wohingegen das onload-Ereignis nicht auftritt, wenn die Seite aus dem Cache geladen wird. Um herauszufinden, ob eine Seite direkt vom Server geladen oder zwischengespeichert wird, können Sie die persisted Eigenschaft des PageTransitionEvent-Objekts verwenden. Diese Eigenschaft gibt true zurück, wenn die Seite vom Browser zwischengespeichert wird, andernfalls false

Rufen Sie die Funktion auf, wenn der Benutzer zur Webseite navigiert:

<body onpageshow="myFunction()">

onpaste

– Inhalte wurden eingefügt. Das onpaste-Ereignis tritt auf, wenn der Benutzer Inhalte in ein Element einfügt. Das Onpaste-Ereignis wird am häufigsten für Elemente verwendet input mit type=“text“. Das Clipboard-API-Einfügeereignis wird ausgelöst, wenn der Benutzer über die Browser-Benutzeroberfläche eine „Einfüge“-Aktion initiiert. Befindet sich der Cursor in einem bearbeitbaren Kontext (z. B. einem textarea oder einem Element, dessen contenteditable-Attribut auf „true“ gesetzt ist), besteht die Standardaktion darin, den Inhalt der Zwischenablage an der Cursorposition in das Dokument einzufügen. Ein Handler für dieses Ereignis kann auf den Inhalt der Zwischenablage zugreifen, indem er die Methode getData() für die Eigenschaft „clipboardData“ des Ereignisses aufruft. Um das Standardverhalten zu überschreiben (z. B. um andere Daten einzufügen oder den Inhalt der Zwischenablage zu konvertieren), muss der Ereignishandler die Standardaktion mit event.preventDefault() überschreiben und dann die gewünschten Daten manuell einfügen. Sie können ein synthetisches Einfügeereignis erstellen und auslösen, dies hat jedoch keine Auswirkungen auf den Inhalt des Dokuments. Dieses Ereignis wird angezeigt, kann abgebrochen werden und ist zusammengestellt. Wird nur für Eingabefelder verwendet.

Siehe auch... Wissenschaftler erforschen und suchen weiterhin nach potenziell bewohnbaren außerirdischen Welten Wissenschaftler schlagen Alarm: Die Welt verliert rapide Süßwasser Anthropogene und klimatische Veränderungen in den Flüssen und Seen der Erde Die letzten zwei Jahre der Erforschung der Gletscher auf dem Mars haben interessantere Ergebnisse geliefert als erwartet

Rufen Sie eine Funktion auf, wenn Text in ein Element eingefügt wird input:

<input type="text" onpaste="myFunction()" value="Paste something here">

Rufen Sie die Funktion auf, wenn Text in das p-Element eingefügt wird. (Beachten Sie, dass contenteditable auf „true“ gesetzt ist.):

<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.</p>

Beispiel

<script>
const target = document.querySelector("div.target");
target.addEventListener("paste", (event) => {
  event.preventDefault();
  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});
<script>
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

onpause

– Wiedergabe pausieren. Ein Handler für das Pause-Ereignis, das auftritt, wenn die Audio-/Videowiedergabe durch den Benutzer oder die Software angehalten wird. Das Onpause-Ereignis tritt auf, wenn das Audio/Video angehalten wird. Das Onpause-Ereignis tritt auch ein, wenn das Audio/Video das Ende erreicht hat.

Rufen Sie eine Funktion auf, wenn das Video angehalten wurde:

<video onpause="myFunction()">

onplay

– Starten Sie die Wiedergabe. Handler play für das Wiedergabeereignis, das auftritt, wenn die Wiedergabe einer Audio-/Videodatei gestartet wurde.

Rufen Sie die Funktion auf, wenn die Wiedergabe des Videos beginnt:

<video onplay="myFunction()">

onplaying

– Dateiwiedergabe. Handler playing für das Wiedergabeereignis, das auftritt, wenn die Wiedergabe einer Audio-/Videodatei gestartet wurde. Das Onplaying-Ereignis tritt auf, wenn die Audio-/Videowiedergabe beginnt. Das Onplaying-Ereignis tritt auch auf, wenn Audio/Video fortgesetzt wird, nachdem es angehalten oder gepuffert wurde.

Rufen Sie eine Funktion auf, wenn das Video startet:

<video onplaying="myFunction()">

onprogress

– Abrufen von Dateimetadaten. Ein Handler progress für das Fortschrittsereignis, das auftritt, wenn die angegebene Audio-/Videodatei vom Server heruntergeladen wird. Das onprogress-Ereignis tritt auf, wenn der Browser Audio oder Video lädt.

Rufen Sie beim Laden eines Videos eine Funktion auf:

<video onprogress="myFunction()">

onratechange

– Ändern Sie die Wiedergabegeschwindigkeit. Ein Handler für das Ratechange-Ereignis, das auftritt, wenn sich die Geschwindigkeit der Audio-/Videowiedergabe ändert (z. B. wenn der Benutzer in den langsamen oder schnellen Wiedergabemodus wechselt). Das onratechange-Ereignis tritt auf, wenn sich die Medienwiedergabegeschwindigkeit ändert (z. B. wenn der Benutzer in den langsamen oder schnellen Wiedergabemodus wechselt). Dieses Ereignis wird durch die Rate-Wiedergabeeigenschaft des Audio/Video-Objekts ausgelöst, die die aktuelle Audio-/Video-Wiedergabegeschwindigkeit festlegt oder zurückgibt.

Rufen Sie eine Funktion auf, wenn sich die Videowiedergabegeschwindigkeit ändert:

<video onratechange="myFunction()">

onreset

– Datenrücksetzung abgeschlossen. Handler für das Reset-Ereignis, das auftritt, wenn das Formular gelöscht wird, wenn auf die Schaltfläche „Reset“ geklickt wird. Führt JavaScript-Code aus, wenn das Reset-Ereignis auftritt; das heißt, wenn der Benutzer die Werte von Formularelementen wiederherstellt (indem er auf die Schaltfläche „Zurücksetzen“ klickt).

Rufen Sie eine Funktion auf, wenn das Formular zurückgesetzt wird:

<form onreset="myFunction()">
  Enter name: <input type="text">
  <input type="reset">
</form>

Das folgende Beispiel gibt ein Textobjekt mit dem Standardwert „CA“ und einer Reset-Schaltfläche aus. Wenn der Benutzer die Statusabkürzung in das Textobjekt eingibt und auf die Schaltfläche „Zurücksetzen“ klickt, wird der ursprüngliche Wert von „CA“ wiederhergestellt. Der onReset-Handler des Formulars zeigt eine Meldung an, dass die Standardwerte wiederhergestellt wurden.

<FORM NAME="form1" onReset="alert('Defaults have been restored.')">
State:
<INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"><P>
<INPUT TYPE="reset" VALUE="Clear Form" NAME="reset1">
</FORM>

onresize

– Größe eines Elements ändern. Führt JavaScript-Code aus, wenn das Größenänderungsereignis resize auftritt; Das heißt, wenn der Benutzer oder das Skript die Größe des Fensters oder Rahmens geändert hat. Das Ereignis onresize tritt auf, wenn die Größe des Browserfensters geändert wurde. Tipp: Um die Größe eines Elements zu ermitteln, verwenden Sie die Eigenschaften clientWidth, clientHeight, InnerWidth, InnerHeight, OuterWidth, OuterHeight, OffsetWidth und/oder OffsetHeight. Dieser Handler wird gesendet, nachdem der HTML-Code mit den neuen inneren Fenstergrößen gerendert wurde. Dadurch können Elemente und benannte Anker so positioniert werden, dass sie ihre gewünschte endgültige Größe und Position haben, Bild-SRC-Eigenschaften können dynamisch wiederhergestellt werden usw.

Rufen Sie die Funktion auf, wenn die Größe des Browserfensters geändert wird:

<body onresize="myFunction()">

Verwenden der Methode addEventListener(), um ein „Resize“-Ereignis an ein Fensterobjekt anzuhängen.

window.addEventListener("resize", myFunction);

Hier erstellt die Funktion open_now das myWin-Fenster und erfasst die Resize-Ereignisse. Der onResize-Handler ruft die Funktion „alert_me“ auf, die eine Meldung anzeigt, wenn der Benutzer die Größe des myWin-Fensters ändert.

function open_now(){
var myWin;
myWin=window.open("","displayWin","width=400,height=300,resizable=yes,
menubar=no,location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please resize me</h1></body>"
+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.RESIZE);
myWin.onresize=alert_me;
}
function alert_me(){
alert("You resized me! \nNow my outer width: " + this.outerWidth +
"\n and my outer height: " +this.outerHeight);
this.focus();
}

onscroll

– Scrollen durch den Inhalt des Elements. Das Onscroll-Ereignis tritt auf, wenn die Bildlaufleiste eines Elements gescrollt wird. Tipp: Verwenden Sie die CSS-Eigenschaft „Overflow Style“, um eine Bildlaufleiste für ein Element zu erstellen. Das Scroll-Ereignis wird ausgelöst, wenn das Element gescrollt wird. Um festzustellen, wann der Bildlauf abgeschlossen ist, sehen Sie sich das Bildlaufereignis des Elements an.

Rufen Sie eine Funktion auf, wenn das Div gescrollt wird:

<div onscroll="myFunction()">

Wechseln Sie zwischen Klassennamen an verschiedenen Bildlaufpositionen. Wenn der Benutzer 50 Pixel vom oberen Rand der Seite nach unten scrollt, wird der Klassenname „test“ zum Element hinzugefügt (und beim erneuten Scrollen nach oben entfernt).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

Fügen Sie ein Element ein, wenn der Benutzer 350 Pixel nach unten gescrollt hat (fügen Sie eine slideUp-Klasse hinzu):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Das folgende Beispiel zeigt, wie das Scroll-Ereignis verwendet wird, um zu erkennen, wann der Benutzer durch ein Element scrollt:

<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
  output.textContent = "Scroll event fired!";
  setTimeout(() => {
    output.textContent = "Waiting on scroll events...";
  }, 1000);
});
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>

Das folgende Beispiel zeigt, wie die Onscroll-Ereignishandlereigenschaft verwendet wird, um zu erkennen, wann der Benutzer einen Bildlauf durchführt:

<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
  output.textContent = "Element scroll event fired!";
  setTimeout(() => {
    output.textContent = "Waiting on scroll events...";
  }, 1000);
};
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>

onsearch

– Suche abgeschlossen. Das onsearch-Ereignis tritt auf, wenn der Benutzer die „ENTER“-Taste oder die „x“-Taste an einem Element drückt input mit type=“search“.

Aufrufen einer Funktion beim Senden einer Suche:

<input type="search" onsearch="myFunction()">

onseeked

– die Suche hat ein Ende. Handler für das seeked gesuchte Ereignis, das auftritt, wenn der Benutzer den Wechsel zu einer neuen Audio-/Video-Wiedergabeposition abgeschlossen hat. Das onseeked-Ereignis tritt auf, wenn der Benutzer nach einer neuen Position in den Medien sucht.

Rufen Sie die Funktion auf, wenn der Benutzer nach einer neuen Position im Video sucht:

<video onseeked="myFunction()">

Dieses Beispiel zeigt den Unterschied zwischen einem Onseeking-Ereignis und einem Onseek-Ereignis:

<video onseeking="myFunction()" onseeked="mySecondFunction()">

Verwenden der currentTime-Eigenschaft eines Video-Objekts, um die aktuelle Position während der Wiedergabe anzuzeigen, wenn der Benutzer die Bewegung/Verschiebung an eine neue Position abgeschlossen hat:

// Get the video element:
const video = document.getElementById("myVideo");
// Attach a seeked event to the video element:
video.addEventListener("seeked", myFunction);
// Function to display the time position of the playback:
function myFunction() {
document.getElementById("demo").innerHTML = video.currentTime;
}

onseeking

– Suche ist aktiv. Handler für das seeking Suchereignis, das auftritt, wenn der Benutzer beginnt, sich zu einer neuen Audio-/Video-Wiedergabeposition zu bewegen. Das Onseeking-Ereignis tritt ein, wenn der Benutzer mit der Suche nach einer neuen Position in den Medien beginnt.

Rufen Sie die Funktion auf, wenn der Benutzer beginnt, sich an eine neue Position im Video zu bewegen:

<video onseeking="myFunction()">

onselect

– Auswählen eines Textes oder Werts. Ein Handler für das Select-Ereignis, bei dem der Benutzer mit der Maus oder der Tastatur Text innerhalb eines Elements auswählt. Das Ereignis onselect tritt auf, nachdem Text in einem Element ausgewählt wurde. Das onselect-Ereignis wird am häufigsten für Elemente verwendet input type=“text“ oder textarea.

Hier wird onSelect für das valueField-Textobjekt verwendet, um die selectState-Funktion aufzurufen.

Siehe auch... Neue Methode zur Beobachtung einzelner Atome bestätigt jahrhundertealte quantenmechanische Theorie Bis zu 10 % der schweren Elemente des Universums, wie Gold, Platin und andere, entstanden beim Ausbruch eines riesigen Magnetars Ein bisschen über Katzen: Die Geschichte der Domestizierung und interessante Fakten über das Verhalten von Haustieren

<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">

Rufen Sie eine Funktion auf, wenn Text ausgewählt ist:

<input type="text" onselect="myFunction()">

Verwenden der Methode select() eines Eingabe-HTML-DOM-Textobjekts, um den Inhalt eines Textfelds auszuwählen. In diesem Fall wird das Ereignis „onselect“ ausgelöst, das die Alarmfunktion auslöst.

// Select the contents of a text field
function mySelectFunction() {
  document.getElementById("myText").select();
}
// Alert some text when the text in the text field has been selected
function myAlertFunction() {
  alert("You selected some text!");
}

onshow

– Artikelanzeige. Ein Handler für das Show-Ereignis, das auftritt, wenn das Menüelement menu als Kontextmenü angezeigt wird. Das onshow-Ereignis tritt auf, wenn ein Menüelement als Kontextmenü angezeigt wird.

Rufen Sie die Funktion auf, wenn das Menüelement menu als Kontextmenü angezeigt wird:

<div contextmenu="mymenu">
  <p>Right-click inside this box to see the context menu!
  <menu type="context" id="mymenu" onshow="myFunction()">
    <menuitem label="Refresh" onclick="window.location.reload();"></menuitem>
  </menu>
</div>

onstalled

– Der Browser kann aus irgendeinem Grund keine Mediendaten abrufen. Ein Handler für das stalled blockierte Ereignis, das auftritt, wenn der Browser versucht, Mediendaten abzurufen, diese jedoch nicht verfügbar sind. Das onstalled-Ereignis tritt auf, wenn der Browser versucht, nicht verfügbare Mediendaten abzurufen.

Rufen Sie die Funktion auf, wenn der Browser versucht, nicht verfügbare Medien abzurufen:

<video onstalled="myFunction()">

onsubmit

– Bestätigung der Übermittlung der Formulardaten. Handler für das Submit-Ereignis, das auftritt, wenn das Formular gesendet wird. Führt JavaScript-Code aus, wenn das Submit-Ereignis auftritt; das heißt, wenn der Benutzer das Formular an den Server sendet. Sie können onSubmit verwenden, um zu verhindern, dass das Formular gesendet wird. Platzieren Sie dazu in diesem Event-Handler eine Return-Anweisung, die „false“ zurückgibt. Alle anderen Werte ermöglichen das Absenden des Formulars. Wenn keine Rückgabeerklärung return vorhanden ist, wird das Formular gesendet.

Hier ruft onSubmit die Validierungsfunktion validate auf, um die übermittelten Daten zu berechnen. Sind die Daten korrekt, wird das Formular abgesendet; andernfalls wird das Formular nicht übermittelt.

<FORM onSubmit="return validate(this)">
...
</FORM>

Aufrufen einer Funktion beim Absenden eines Formulars:

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form>

onsuspend

– Stoppen Sie die Metadatenextraktion. Ein Handler für das Suspend-Ereignis, das auftritt, wenn der Empfang von Mediendateidaten aus irgendeinem Grund stoppt, bevor der vollständige Download abgeschlossen ist. Das onsuspend-Ereignis tritt auf, wenn der Browser keine Mediendaten empfängt. Das onsuspend-Ereignis tritt auf, wenn ein Download verhindert oder angehalten wird.

Rufen Sie eine Funktion auf, wenn der Browser keine Mediendaten empfängt:

<video onsuspend="myFunction()">

ontimeupdate

– Ändern der Position (Zeit) der Dateiwiedergabe, d. h. Zurückspulen der Datei. Ein Handler für das timeupdate-Ereignis, das auftritt, wenn sich die Audio-/Video-Wiedergabeposition geändert hat (z. B. wenn der Benutzer einen Wiedergabepunkt ausgewählt hat, der viel weiter vom aktuellen entfernt ist). Das ontimeupdate-Ereignis tritt auf, wenn sich die Medienwiedergabezeit ändert. Das ontimeupdate-Ereignis tritt während der Medienwiedergabe auf. Das ontimeupdate-Ereignis tritt ein, wenn der Benutzer die Wiedergabeposition verschiebt.

Funktion aufrufen, wenn sich die Wiedergabezeit geändert hat:

<video ontimeupdate="myFunction()">

Verwenden Sie die Eigenschaft currentTime, um die aktuelle Wiedergabeposition auf 5 Sekunden festzulegen:

document.getElementById("myVideo").currentTime = 5;

ontoggle

– Der Benutzer öffnet oder schließt das Element details. Ereignishandler toggle, Dies geschieht, wenn der Benutzer ein Element öffnet oder schließt details. Ereignis ontoggle tritt auf, wenn der Benutzer ein Element öffnet oder schließt details, details Gibt zusätzliche Informationen an, die der Benutzer auf Anfrage anzeigen oder ausblenden kann.

Rufen Sie eine Funktion auf, wenn ein Element geöffnet oder geschlossen wird details:

<details ontoggle="myFunction()">

onunload

– Der Ladevorgang ist abgeschlossen, danach wird das Dokument geschlossen. Das onunload-Ereignis tritt ein, nachdem die Seite entladen wurde (oder das Browserfenster geschlossen wurde). Onunload tritt auf, wenn der Benutzer die Seite verlässt (durch Klicken auf einen Link, Absenden eines Formulars, Schließen des Browserfensters usw.). Notiz. Das onunload-Ereignis wird auch ausgelöst, wenn der Benutzer die Seite neu lädt (und das onload-Ereignis). Verwenden Sie onUnload mit BODY- oder FRAMESET-Tags, zum Beispiel BODY onUnload=“…“. Bei Frames und Framesets erscheint der onUnload-Handler des Frames (im BODY-Tag platziert) vor dem onUnload-Handler des Framesets (im FRAMESET-Tag platziert).

Rufen Sie die Funktion auf, wenn der Benutzer das Dokument entlädt:

<body onunload="myFunction()">

Hier ruft onUnload die Funktion cleanUp auf, um eine Verarbeitung durchzuführen, wenn der Benutzer die Seite verlässt (schließt):

<BODY onUnload="cleanUp()">

onvolumechange

– volume changes Handler für das volumechange-Ereignis, das auftritt, wenn sich der Lautstärkewert ändert (einschließlich der vollständigen Stummschaltung des Tons). Das onvolumechange-Ereignis tritt auf, wenn sich die Medienlautstärke ändert. Das onvolumechange-Ereignis tritt auf, wenn die Lautstärke zunimmt oder abnimmt. Das onvolumechange-Ereignis tritt auf, wenn Audio stummgeschaltet oder die Stummschaltung aufgehoben wird.

Rufen Sie eine Funktion auf, wenn sich die Videolautstärke ändert:

<video onvolumechange="myFunction()">

Verwenden der Volume-Eigenschaft zum Festlegen der Lautstärke:

document.getElementById("myVideo").volume = 0.2;

onwaiting

– Ich warte darauf, dass die Wiedergabe fortgesetzt wird. Ein Handler für das waiting Warteereignis, das auftritt, wenn eine Mediendatei gestoppt wird, aber darauf wartet, wieder ausgeführt zu werden (z. B. wenn die Datei angehalten wird, um verbleibende Daten zu puffern). Das onwaiting-Ereignis tritt auf, wenn das Medium auf den nächsten Frame warten muss.

Rufen Sie die Funktion auf, wenn das Video gestoppt wird, da der nächste Frame gepuffert werden muss:

<video onwaiting="myFunction()">

Related Posts

Ereignisse html JavaScript