\u2013 Klicken Sie auf ein Element. tritt auf, wenn das Element mit der linken Maustaste angeklickt wird (bei Ger\u00e4ten mit Touchscreen tritt es auf, wenn es ber\u00fchrt wird).<\/p>\n
![](\"https:\/\/planeta21vek.ru\/elina732\/wp-content\/uploads\/2024\/11\/sobytiya251124.jpg\")
<\/p>\n
Popup-Aufnahmeoptionen<\/p>\n
\r\n<input value="Dr\u00fcck mich" onclick="alert('Klick!')" type="button">\r\n<a href="#" onclick="alert('Beispiel 1 hat funktioniert'); return false;">Beispiel 1<\/a>\r\n<\/pre>\nZahlenfolge beginnend mit 1<\/p>\n
\r\n<script>\r\n function countRabbits() {\r\n for(let i=1; i<=3; i++) {\r\n alert("Kaninchennummer " + i);\r\n }\r\n }\r\n<\/script>\r\n<input type="button" onclick="countRabbits()" value="Kaninchen z\u00e4hlen!">\r\n<input id="elem" type="button" value="Dr\u00fcck mich!">\r\n<script>\r\n elem.onclick = function() {\r\n alert('Danke');\r\n };\r\n<\/script>\r\n<input type="button" id="button" value="Taste">\r\n<script>\r\n button.onclick = function() {\r\n alert('Klik!');\r\n };\r\n<\/script>\r\n<\/pre>\nZeigt \u201ePress me\u201c in einem Popup-Fenster an \u2013 den Inhalt der Schaltfl\u00e4che<\/p>\n
\r\n<button onclick="alert(this.innerHTML)">Press me<\/button>\r\n<\/pre>\nMehrere Popup-Ereignishandler<\/p>\n
\r\n<input id="elem" type="button" value="Press me"\/>\r\n<script>\r\n function handler1() {\r\n alert('Danke!');\r\n };\r\n function handler2() {\r\n alert('Danke noch einmal!');\r\n }\r\n elem.onclick = () => alert("Hallo");\r\n elem.addEventListener("click", handler1); \/\/ Danke!\r\n elem.addEventListener("click", handler2); \/\/ Danke noch einmal!\r\n<\/script>\r\n<\/pre>\nAbrufen von Mauskoordinaten von einem Ereignisobjekt<\/p>\n
\r\n<input type="button" value="Press me" id="elem">\r\n<script>\r\n elem.onclick = function(event) {\r\n \/\/ Ereignistyp, Element und Klickkoordinaten anzeigen\r\n alert(event.type + " \u043d\u0430 " + event.currentTarget);\r\n alert("Koordinaten: " + event.clientX + ":" + event.clientY);\r\n };\r\n<\/script>\r\n<\/pre>\nDen Hintergrund eines Objekts \u00e4ndern<\/p>\n
\r\n<button>Change color<\/button>\r\n<script>\r\nconst btn = document.querySelector("button");\r\nfunction random(number) {\r\n return Math.floor(Math.random() * (number + 1));\r\n}\r\nbtn.onclick = function () {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n};\r\n<\/script>\r\n<button onclick="bgChange()">Press me<\/button>\r\n<script>\r\nfunction bgChange() {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n}\r\n<\/script>\r\n<\/pre>\n\u00c4ndern des Hintergrunds eines div-Elements<\/p>\n
\r\n<div id='myDiv'>Farbwechselelement<\/div>\r\n<button onclick='changeColor()'>Farbe \u00e4ndern<\/button>\r\n<script>\r\nfunction changeColor() {\r\n document.getElementById('myDiv').style.backgroundColor = 'red';\r\n}\r\n<\/script>\r\n<\/pre>\nLinkfarbe \u00e4ndern<\/p>\n
\r\n<script>\r\nfunction ChangeColor(Element) {\r\n\tif (Element.style.color == 'green') Element.style.color = 'red';\r\n\telse Element.style.color = 'green';\r\n\treturn false;\r\n}\r\n<\/script>\r\n<a href="#" style="color: green;" onclick="return ChangeColor(this);">Farbe \u00e4ndern<\/a>\r\n<\/pre>\nFormularvalidierung<\/p>\n
\r\n<form>\r\n <div>\r\n <label for="fname">Name: <\/label>\r\n <input id="fname" type="text" \/>\r\n <\/div>\r\n <div>\r\n <label for="lname">Nachname: <\/label>\r\n <input id="lname" type="text" \/>\r\n <\/div>\r\n <div>\r\n <input id="submit" type="submit" \/>\r\n <\/div>\r\n<\/form>\r\n<p><\/p>\r\n<script>\r\nvar form = document.querySelector("form");\r\nvar fname = document.getElementById("fname");\r\nvar lname = document.getElementById("lname");\r\nvar submit = document.getElementById("submit");\r\nvar para = document.querySelector("p");\r\n\r\nform.onsubmit = function (e) {\r\n if (fname.value === "" || lname.value === "") {\r\n e.preventDefault();\r\n para.textContent = "Beide Felder m\u00fcssen ausgef\u00fcllt werden!";\r\n }\r\n};\r\n<\/script>\r\n<\/pre>\nAbfangen von CSS-Ereignissen im Video mit der Funktion stopPropagation(), die bei Aufruf im Ereignishandler eines Objekts dazu f\u00fchrt, dass der Handler ausgef\u00fchrt wird, das Ereignis jedoch nicht weiter unten in der Kette aufsteigt<\/p>\n
\r\n<button>Display video<\/button>\r\n<div class="hidden">\r\n <video>\r\n <source src="rabbit320.mp4" type="video\/mp4" \/>\r\n <source src="rabbit320.webm" type="video\/webm" \/>\r\n <p>\r\n Your browser doesn't support HTML5 video. Here is a\r\n <a href="rabbit320.mp4">link to the video<\/a> instead.\r\n <\/p>\r\n <\/video>\r\n<\/div>\r\ndiv { position: absolute;\r\n top: 50%;\r\n transform: translate(-50%,-50%);\r\n ... }\r\n.hidden {\r\n left: -50%;\r\n }\r\n.showing {\r\n left: 50%;\r\n }\r\n<script>\r\nvar videoBox = document.querySelector("div");\r\nvar video = document.querySelector("video");\r\nvideoBox.onclick = function () {\r\n videoBox.setAttribute("class", "hidden");\r\n};\r\nvideo.onclick = function () {\r\n video.play();\r\n};\r\nvideo.onclick = function (e) {\r\n e.stopPropagation();\r\n video.play();\r\n};\r\n<\/script>\r\n<p style="text-align: justify;">Text ein- und ausblenden<\/p>\r\n<button onclick='toggleVisibility()'>Ein-\/Ausblenden<\/button>\r\n<div id='hiddenDiv' style='display:none'>Versteckter Text<\/div>\r\n<script>\r\nfunction toggleVisibility() {\r\n let element = document.getElementById('hiddenDiv');\r\n if (element.style.display === 'none') {\r\n element.style.display = 'block';\r\n } else {\r\n element.style.display = 'none';\r\n }\r\n}\r\n<\/script>\r\n<\/pre>\nLaden von Daten \u00fcber AJAX, um Daten vom Server zu laden, ohne die Seite neu zu laden<\/p>\n
\r\nfunction fetchData() {\r\n \/\/ Hier ist Ihr Code f\u00fcr die AJAX-Anfrage\r\n}\r\n<onclick="fetchData()">Daten herunterladen<\/button>\r\n<\/pre>\n\u00c4ndern des Linknamens von On in Off<\/p>\n
\r\n<script>\r\n\/\/Warten Sie, bis die Seite vollst\u00e4ndig geladen ist\r\nwindow.onload = function () {\r\n\r\n \/\/Holen Sie sich die Elementkennung\r\n var a = document.getElementById('switch');\r\n \r\n \/\/H\u00e4ngen Sie eine Veranstaltung daran auf\r\n a.onclick = function() {\r\n \/\/Wir f\u00fchren einige Aktionen durch\r\n if (this.innerHTML=='On') this.innerHTML = 'Off';\r\n else this.innerHTML = 'On';\r\n \/\/verhindern, dass Sie auf den Link klicken href\r\n return false;\r\n }\r\n}\r\n<\/script>\r\n<a id="switch" href="#">On<\/a>\r\n<\/pre>\nonabort<\/span><\/h2>\n\u2013 Unterbrechung der Wiedergabe. Das Ereignis \u201eonabort\u201c 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\u00fcr Elemente audio, embed, img, object, video.<\/p>\n
Benachrichtigung, dass das Laden des Videos unterbrochen wurde<\/p>\n
\r\n<video id="myVideo" onabort="alert('Video load aborted')">\r\n<\/pre>\nBenachrichtigung, dass das Laden des Bildes unterbrochen wurde<\/p>\n
\r\n<img id="myImage" src="example.jpg" onabort="imageAborted()">\r\n<script>\r\n function imageAborted() {\r\n alert("Image load was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nBenachrichtigung, dass die Formular\u00fcbermittlung unterbrochen wurde<\/p>\n
\r\n<form id="myForm">\r\n <input type="text" placeholder="Enter your name">\r\n <input type="submit" value="Submit">\r\n<\/form>\r\n<script>\r\n var form = document.getElementById("myForm");\r\n form.addEventListener("abort", formAborted);\r\n\r\n function formAborted() {\r\n alert("Form submission was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nonafterprint \u2013 Druckvorgang abgeschlossen<\/span><\/h2>\nDas onafterprint-Ereignis tritt auf, wenn die Seite mit dem Drucken beginnt. Das Ereignis onafterprint tritt auf, wenn der Druckdialog geschlossen wird. Der Browser l\u00e4uft onafterprint und onbeforeprint, sodass Notizen, Erkl\u00e4rungen und Kommentare zum Druckvorgang hinzugef\u00fcgt werden k\u00f6nnen. Anwendbar f\u00fcr body.<\/p>\n
\r\n<body onafterprint="myFunction()">\r\n<\/pre>\nonautocomplete \u2013 Automatisches Ausf\u00fcllen des Formulars abgeschlossen<\/span><\/h2>\nEin Attribut, mit dem das Formular mit einem Klick ausgef\u00fcllt wird \u2013 der Browser f\u00fcgt die Werte in die entsprechenden Felder ein.<\/p>\n
\r\n<form>\r\n <label for="name">\u0418\u043c\u044f:<\/label>\r\n <input type="text" id="name" name="name" autocomplete="on">\r\n<\/form>\r\n<\/pre>\nonautocompleteerror \u2013 Fehler beim automatischen Ausf\u00fcllen des Formulars<\/span><\/h2>\nonbeforeprint \u2013 Vorbereitung zum Drucken<\/span><\/h2>\nonbeforeunload \u2013 das Dokument wurde entladen<\/span><\/h2>\nWenn ein Benutzer die Seite verl\u00e4sst, k\u00f6nnen wir ihn fragen, ob er die Seite wirklich verlassen m\u00f6chte. Verantwortlich daf\u00fcr ist die Behandlung des beforeunload-Events. Das Ereignis tritt vor dem Entladeereignis der Seite unload auf. Dieses Ereignis erm\u00f6glicht es der Webseite, einen Best\u00e4tigungsdialog auszul\u00f6sen, in dem der Benutzer gefragt wird, ob er die Seite wirklich verlassen m\u00f6chte. Best\u00e4tigt der Nutzer, navigiert der Browser zu einer neuen Seite, andernfalls bricht er die Navigation ab. Um einen Best\u00e4tigungsdialog anzuzeigen, muss der Ereignishandler gem\u00e4\u00df der Spezifikation \u201epreventDefault()\u201c f\u00fcr das Ereignis aufrufen. Anwendbar f\u00fcr body.<\/p>\n
\r\n<body onbeforeunload="return myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n return "M\u00f6chten Sie die Seite wirklich schlie\u00dfen?...";\r\n}\r\n<\/script>\r\n<\/pre>\nonblur \u2013 Konzentrationsverlust<\/span><\/h2>\nEreignis focus im Moment der Fokussierung aufgerufen, und blur \u2013 wenn das Element den Fokus verliert. Unterst\u00fctzung focus\/blur garantiert f\u00fcr Elemente, mit denen der Besucher interagieren kann: button, input, select, a usw. Zum anderen Formatierungselemente div, span, table \u2013 Standardm\u00e4\u00dfig kann kein Fokus empfangen werden. Verfahren elem.focus() funktioniert f\u00fcr sie nicht, und Ereignisse focus\/blur funktioniert nie. Dies kann mit einem HTML-Attribut ge\u00e4ndert werden tabindex.<\/p>\n
Validierung (\u00dcberpr\u00fcfung) der eingegebenen Daten mit einer Beschriftung unter dem Formular<\/p>\n
\r\n<style>\r\n .invalid { border-color: red; }\r\n #error { color: red }\r\n<\/style>\r\n<script>\r\ninput.onblur = function() {\r\n if (!input.value.includes('@')) { \/\/ \u043d\u0435 email\r\n input.classList.add('invalid');\r\n error.innerHTML = 'Bitte geben Sie richtig eine email.'\r\n }\r\n};\r\ninput.onfocus = function() {\r\n if (this.classList.contains('invalid')) {\r\n \/\/ Wir entfernen die Fehleranzeige, weil Der Benutzer m\u00f6chte Daten erneut eingeben\r\n this.classList.remove('invalid');\r\n error.innerHTML = "";\r\n }\r\n};\r\n<\/script>\r\n\u0412\u0430\u0448 email: <input type="email" id="input">\r\n<div id="error"><\/div>\r\n<\/pre>\nValidierung (\u00dcberpr\u00fcfung) der eingegebenen Daten durch Ausf\u00fcllen des Formulars mit Farbe<\/p>\n
\r\n<style>\r\n .error {\r\n background: red;\r\n }\r\n<\/style>\r\n<script>\r\n input.onblur = function() {\r\n if (!this.value.includes('@')) { \/\/ nicht email\r\n \/\/ Fehler anzeigen\r\n this.classList.add("error");\r\n \/\/ ...und kehren Sie den Fokus zur\u00fcck\r\n input.focus();\r\n } else {\r\n this.classList.remove("error");\r\n }\r\n };\r\n<\/script>\r\n\u0412\u0430\u0448 email: <input type="email" id="input">\r\n<input type="text" style="width:280px" placeholder="Geben Sie eine falsche E-Mail-Adresse ein und klicken Sie hier">\r\n<\/pre>\nFormulartext \u00e4ndern CLICK HERE<\/p>\n
\r\n<input type="text" value="CLICK HERE" \/>\r\n<script>\r\nlet input = document.querySelector("input");\r\ninput.onblur = inputBlur;\r\ninput.onfocus = inputFocus;\r\nfunction inputBlur() {\r\n input.value = "Focus has been lost";\r\n}\r\nfunction inputFocus() {\r\n input.value = "Focus is here";\r\n}\r\n<\/script>\r\n<\/pre>\n\u00dcberpr\u00fcfen Sie die Form anhand einer Rahmenkontur<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="ru">\r\n <head>\r\n <meta charset="utf-8">\r\n <title>Ereignis onblur<\/title>\r\n <style>\r\n .warning {\r\n background-color: #ffe;\r\n outline: 1px solid #dc143c;\r\n }\r\n <\/style>\r\n <script>\r\n function warning(field) {\r\n if (field.value == '') field.classList.add('warning');\r\n else field.classList.remove('warning');\r\n }\r\n <\/script>\r\n <\/head> \r\n <body>\r\n <form> \r\n <p><input placeholder="Name" onblur="warning(this)"><\/p>\r\n <p><input placeholder="Nachname" onblur="warning(this)"><\/p>\r\n <p><input placeholder="Adresse" onblur="warning(this)"><\/p>\r\n <\/form>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nFokusbeleuchtung ohne onblur<\/p>\n
\r\n<style>\r\n*!*input:focus*\/!* {\r\n background: #FA6;\r\n outline: none; \/* Rahmen entfernen *\/\r\n}\r\n<\/style>\r\n<input type="text">\r\n<p>W\u00e4hler focus hebt ein Element hervor, wenn Sie darauf fokussieren, und entfernt den Rahmen, den der Browser standardm\u00e4\u00dfig zum Hervorheben dieses Elements verwendet.<\/p>\r\n<\/pre>\nPlatzhalter \u2013 Hinweiswert im Inneren INPUT, das beim Fokussieren automatisch verschwindet und solange existiert, bis der Besucher mit der Texteingabe beginnt, ohne onblur<\/p>\n
\r\n<style>\r\n.my*!*::-webkit-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-moz-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-ms-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n<\/style>\r\n<input class="my" type="text" placeholder="E-mail">\r\n<\/pre>\noncancel \u2013 Aktion abbrechen<\/span><\/h2>\nBrechen Sie den aktuellen Vorgang auf dem Ger\u00e4t ab. Wird zur asynchronen Ger\u00e4testeuerung verwendet. Wenn Sie diese Funktion ausf\u00fchren, bevor Sie einen Vorgang starten, wird der Vorgang abgebrochen.<\/p>\n
\r\nDevice.Cancel ();\r\n<\/pre>\noncanplay<\/span><\/h2>\n– Sie k\u00f6nnen mit der Wiedergabe der angegebenen Mediendatei beginnen<\/p>\n
Das oncanplay-Ereignis tritt auf, wenn der Browser mit der Wiedergabe des angegebenen Audios\/Videos beginnen kann (wenn es zun\u00e4chst ausreichend gepuffert ist). W\u00e4hrend des Audio-\/Video-Ladevorgangs treten die folgenden Ereignisse in dieser Reihenfolge auf: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
F\u00fchren Sie JavaScript aus, wenn das Video abspielbereit ist:<\/p>\n
\r\n<video oncanplay="myFunction()">\r\n<\/pre>\noncanplaythrough<\/span><\/h2>\n– Sie k\u00f6nnen mit der Wiedergabe der angegebenen Mediendatei beginnen, ohne zum Puffern anhalten zu m\u00fcssen. Das oncanplaythrough-Ereignis tritt ein, wenn der Browser feststellt, dass er das angegebene Medium abspielen kann, ohne dass es zum Puffern angehalten werden muss.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn das Video vollst\u00e4ndig und ohne Unterbrechung abgespielt werden kann:<\/p>\n
\r\n<video oncanplaythrough="myFunction()">\r\n<\/pre>\nonchange \u2013 Wert \u00e4ndern<\/span><\/h2>\nDas onchange-Ereignis tritt auf, wenn der Wert des Elements ge\u00e4ndert wurde. Bei Optionsfeldern und Kontrollk\u00e4stchen tritt das Ereignis onchange ein, wenn sich der aktivierte Status \u00e4ndert. Dieses Ereignis \u00e4hnelt dem oninput-Ereignis. Der Unterschied besteht darin, dass das oninput-Ereignis unmittelbar nach der Wert\u00e4nderung des Elements auftritt, w\u00e4hrend das onchange-Ereignis auftritt, wenn das Element den Fokus verliert, nachdem sich der Inhalt ge\u00e4ndert hat. Ein weiterer Unterschied besteht darin, dass das onchange-Ereignis auch auf das Element wirkt select. Ein Handler f\u00fcr das onchange-Ereignis, das ausgel\u00f6st wird, wenn sich der Wert des Elements ge\u00e4ndert 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\u00fchrt JavaScript-Code aus, wenn das \u00c4nderungsereignis auftritt; das hei\u00dft, wenn das Feld Select, Text oder Textarea verliert den Fokus und sein Wert wurde ge\u00e4ndert.<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde<\/p>\n
F\u00fchren Sie JavaScript aus, wenn der Benutzer die ausgew\u00e4hlte Elementoption \u00e4ndert select:<\/p>\n
\r\n<select onchange="myFunction()">\r\n<\/pre>\nHier ist userName ein Textfeld. Wenn der Benutzer den Text \u00e4ndert und das Feld verl\u00e4sst, ruft der onChange-Handler die Funktion checkValue auf, um zu best\u00e4tigen, dass userName g\u00fcltig ist:<\/p>\n
\r\n<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">\r\n<\/pre>\nonclose \u2013 etwas schlie\u00dfen<\/span><\/h2>\nEreignishandler f\u00fcr Schlie\u00dfereignisse, die an das Fenster gesendet werden. Das OnClose-Ereignis tritt ein, wenn das Dialogfeld geschlossen wird. Sie k\u00f6nnen einen Ereignishandler f\u00fcr das OnClose-Ereignis erstellen, um bestimmte Aktionen auszuf\u00fchren, wenn das Dialogfeld geschlossen wird. Ereignishandler close, Dies wird f\u00fcr Dialogelemente aufgerufen, wenn diese geschlossen werden, und auch f\u00fcr WebSocket-Elemente, wenn die Verbindung abgeschlossen ist.<\/p>\n
oncontextmenu \u2013 \u00d6ffnen des Kontextmen\u00fcs<\/span><\/h2>\nDas oncontextmenu-Ereignis tritt auf, wenn der Benutzer mit der rechten Maustaste auf ein HTML-Element klickt, um das contextmenu zu \u00f6ffnen. Event-Handler-Eigenschaft f\u00fcr das Rechtsklick-Ereignis innerhalb eines Elements window. Wenn das Standardverhalten nicht verhindert wird, wird das Browser-Kontextmen\u00fc aktiviert (Es gibt einen Fehler in IE8, der dazu f\u00fchrt, dass das Kontextmen\u00fc nicht aktiviert wird, wenn ein contextmenu-Ereignishandler definiert ist). Die Veranstaltung wird zusammen mit anderen Veranstaltungen stattfinden right-click und ist unabh\u00e4ngig vom \u201econtextmenu\u201c-Attribut des Elements.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn der Benutzer im Kontextmen\u00fc mit der rechten Maustaste auf das div-Element klickt:<\/p>\n
\r\n<div oncontextmenu="myFunction()" contextmenu="mymenu">\r\n<\/pre>\nDer Code in diesem Beispiel \u00e4ndert das Standardverhalten des Browsers, indem er den Rechtsklick deaktiviert.<\/p>\n
\r\ndocument.oncontextmenu = function () {\r\n \/\/ Verwenden Sie aus Gr\u00fcnden der IE8-Kompatibilit\u00e4t das Objekt \u201edocument\u201c anstelle von \u201ewindow\u201c.\r\n return false;\r\n};\r\nwindow.addEventListener(\r\n "contextmenu",\r\n function (e) {\r\n \/\/ Nicht kompatibel mit IE-Versionen vor 9\r\n e.preventDefault();\r\n },\r\n false,\r\n);\r\n<\/pre>\noncopy \u2013 Kopiervorgang abgeschlossen<\/span><\/h2>\nDas 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\u00e4chlich f\u00fcr Elemente verwendet „input“ mit type=“text“. Wird beim Einf\u00fcgen\/Kopieren\/L\u00f6schen von Text ausgel\u00f6st. Wenn Sie die Browseraktion in ihren Handlern abbrechen, erfolgt kein Einf\u00fcgen\/Kopieren\/L\u00f6schen. Der eingef\u00fcgte Wert kann nicht abgerufen werden: Zum Zeitpunkt der Ausl\u00f6sung des Ereignisses hat das Element noch den alten Wert und der neue ist nicht verf\u00fcgbar.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn Sie Elementtext kopieren input:<\/p>\n
\r\n<input type="text" oncopy="myFunction()" value="Versuchen Sie, diesen Text zu kopieren">\r\n<\/pre>\noncuechange – \u00c4ndern der Beschriftung im Element track<\/span><\/h2>\nHandler f\u00fcr das cuechange-Ereignis, das ausgel\u00f6st wird, wenn das TextTrack-Element die aktuell angezeigten Zeitstempel \u00e4ndert (cue).<\/p>\n
oncut \u2013 Der Inhalt wurde gek\u00fcrzt<\/span><\/h2>\nDas oncut-Ereignis tritt auf, wenn der Benutzer den Inhalt eines Elements ausschneidet. Obwohl das oncut-Ereignis von allen HTML-Elementen unterst\u00fctzt wird, ist es tats\u00e4chlich nicht m\u00f6glich, Inhalte beispielsweise in einem p-Element auszuschneiden, ES SEI DENN, das Element hat contenteditable auf gesetzt „true“. Das Oncut-Ereignis wird haupts\u00e4chlich f\u00fcr Elemente verwendet input mit type=“text“.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn Sie Text in einem Element ausschneiden input:<\/p>\n
\r\n<input type="text" oncut="myFunction()" value="Versuchen Sie, diesen Text zu k\u00fcrzen">\r\n<\/pre>\nondblclick \u2013 Doppelklicken Sie auf das Element<\/span><\/h2>\nHandler f\u00fcr 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\u00dft, wenn der Benutzer auf ein Formularelement oder einen Hyperlink doppelklickt.<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Stellt die Position des Cursors dar, wenn das Ereignis auftritt.
\nwhich – Stellt 1 f\u00fcr einen linken Mausklick und 3 f\u00fcr einen rechten Mausklick dar.
\nmodifiers – Enth\u00e4lt eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedr\u00fcckt wurden.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn Sie auf das p-Element doppelklicken:<\/p>\n
\r\n<p ondblclick="myFunction()">Doppelklicken Sie auf mich<\/p>\r\n<\/pre>\nHier wird der alert-dialog angezeigt, wenn der Benutzer auf die Schaltfl\u00e4che doppelklickt:<\/p>\n
\r\n<form>\r\n<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">\r\n<\/form>\r\n<\/pre>\nondrag – Ziehen eines Elements<\/span><\/h2>\nDas ondrag-Ereignis tritt auf, wenn Sie ein Element oder ausgew\u00e4hlten Text ziehen. Drag & Drop ist eine sehr h\u00e4ufige Funktion in HTML5. Dabei \u201egreifen\u201c Sie ein Objekt und ziehen es an eine andere Position.<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\ndata – Gibt ein Array von Zeichenfolgen zur\u00fcck, das die URLs der freigegebenen Objekte enth\u00e4lt.
\nmodifiers – Enth\u00e4lt eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedr\u00fcckt wurden.
\nscreenX, screenY – Stellt die Position des Cursors dar, wenn das Ereignis auftritt.<\/p>\n
JavaScript ausf\u00fchren, wenn das p-Element gezogen wird:<\/p>\n
\r\n<p draggable="true" ondrag="myFunction(event)">Zieh mich!<\/p>\r\n<\/pre>\nondragend – Das Ziehen des Elements ist abgeschlossen<\/span><\/h2>\nDas ondragend-Ereignis tritt ein, wenn der Benutzer mit dem Ziehen eines Elements oder einer Textauswahl fertig ist.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn der Benutzer mit dem Ziehen des p-Elements fertig ist:<\/p>\n
\r\n<p draggable="true" ondragend="myFunction(event)">Zieh mich!<\/p>\r\n<\/pre>\nondragenter<\/span><\/h2>\n– Das Element wird in eine g\u00fcltige Zielzone gezogen. Das ondragenter-Ereignis tritt auf, wenn das gezogene Element oder der ausgew\u00e4hlte Text ein g\u00fcltiges L\u00f6schziel erreicht. Die Ereignisse ondragenter und ondragleave k\u00f6nnen 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\u00f6scht wird, wenn das Element vom Ziel wegbewegt wird.<\/p>\n
JavaScript ausf\u00fchren, wenn das gezogene Element das Ziehziel erreicht:<\/p>\n
\r\n<div ondragenter="myFunction(event)"><\/div>\r\n<\/pre>\nondragexit<\/span><\/h2>\n\u2013 Beenden Sie den Drag-and-Drop-Modus. Ein Handler f\u00fcr das dragexit-Ereignis, das auftritt, wenn ein Element nicht mehr das Ziel eines Elements ist, das es akzeptieren kann.<\/p>\n
ondragleave<\/span><\/h2>\n– Element hinterl\u00e4sst ein g\u00fcltiges Ziel. Das ondragleave-Ereignis tritt ein, wenn das gezogene Element oder die Textauswahl ein g\u00fcltiges Ablageziel verl\u00e4sst.<\/p>\n
JavaScript ausf\u00fchren, wenn das gezogene Element vom Ziehziel wegbewegt wird:<\/p>\n
\r\n<div ondragleave="myFunction(event)"><\/div>\r\n<\/pre>\nondragover<\/span><\/h2>\n– Das Element wird an einen g\u00fcltigen Zielpunkt gezogen. Das ondragover-Ereignis tritt auf, wenn ein gezogenes Element oder ein ausgew\u00e4hlter Text \u00fcber ein g\u00fcltiges Ablageziel gezogen wird. Standardm\u00e4\u00dfig k\u00f6nnen Daten\/Elemente nicht aus anderen Elementen entfernt werden. Um das L\u00f6schen zu erm\u00f6glichen, m\u00fcssen wir die Elementverarbeitung standardm\u00e4\u00dfig deaktivieren. Dies erfolgt durch Aufrufen der Methode event.preventDefault() f\u00fcr das ondragover-Ereignis.<\/p>\n
JavaScript ausf\u00fchren, wenn ein Element \u00fcber das Ziehziel gezogen wird:<\/p>\n
\r\n<div ondragover="myFunction(event)"><\/div>\r\n<\/pre>\nondragstart<\/span><\/h2>\n\u2013 Beginn des Drag-and-Drop-Vorgangs. Das ondragstart-Ereignis tritt auf, wenn der Benutzer mit dem Ziehen eines Elements oder ausgew\u00e4hlten Texts beginnt.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn der Benutzer mit dem Ziehen des p-Elements beginnt:<\/p>\n
\r\n<p draggable="true" ondragstart="myFunction(event)">Zieh mich!<\/p>\r\n<\/pre>\nondrop<\/span><\/h2>\n\u2013 Das gezogene Element wird freigegeben. Das ondrop-Ereignis tritt ein, wenn das gezogene Element oder der ausgew\u00e4hlte Text auf einem g\u00fcltigen Ablageziel abgelegt wird.<\/p>\n
JavaScript ausf\u00fchren, wenn ein gezogenes Element in einem div entfernt wird:<\/p>\n
\r\n<div ondrop="myFunction(event)"><\/div>\r\n<\/pre>\nondurationchange<\/span><\/h2>\n– \u00c4nderung der Medienl\u00e4nge. Das ondurationchange-Ereignis tritt auf, wenn sich die Dauer des Audios\/Videos \u00e4ndert. Beim Laden von Audio\/Video \u00e4ndert sich die Dauer von \u201eNaN\u201c zur tats\u00e4chlichen Dauer des Audios\/Videos. W\u00e4hrend des Audio-\/Video-Ladevorgangs treten die folgenden Ereignisse in dieser Reihenfolge auf: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
F\u00fchren Sie JavaScript aus, wenn sich die Videol\u00e4nge ge\u00e4ndert hat:<\/p>\n
\r\n<video ondurationchange="myFunction()">\r\n<\/pre>\nonemptied<\/span><\/h2>\n\u2013 Die Datei war pl\u00f6tzlich nicht mehr verf\u00fcgbar. Ein Handler f\u00fcr das emptied-Ereignis, das auftritt, wenn die aktuelle Wiedergabeliste f\u00fcr ein Audio- oder Videoelement leer ist. Meistens aufgrund eines Verbindungsfehlers.<\/p>\n
onended<\/span><\/h2>\n\u2013 Die Wiedergabe ist abgeschlossen. Das onended-Ereignis tritt auf, wenn das Audio\/Video das Ende erreicht. Dieses Ereignis ist n\u00fctzlich f\u00fcr Nachrichten wie \u201eDanke f\u00fcrs Zuh\u00f6ren\u201c, \u201eDanke f\u00fcrs Zuschauen\u201c usw.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn der Ton endet:<\/p>\n
\r\n<audio onended="myFunction()">\r\n<\/pre>\nonerror<\/span><\/h2>\n\u2013 Es ist ein Fehler aufgetreten. Das onerror-Ereignis wird ausgel\u00f6st, wenn beim Laden einer externen Datei (z. B. eines Dokuments oder Bilds) ein Fehler auftritt. Bei der Verwendung auf Audio-\/Videomedien treten zugeh\u00f6rige Ereignisse auf, wenn es zu einer Unterbrechung des Medienladevorgangs kommt: onabort, onemptied, onstalled, onsuspend.<\/p>\n
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\u00fcltige URL im IMG-Tag oder ung\u00fcltige Bilddaten ausgel\u00f6st.<\/p>\n
window.onerror Gilt nur f\u00fcr Fehler, die in dem Fenster auftreten, das window.onerror enth\u00e4lt, und nicht f\u00fcr Fehler in anderen Fenstern.<\/p>\n
onError kann die folgenden Werte haben:
\n\u2013 null, um alle JavaScript-Fehlerdialoge zu unterdr\u00fccken. Wenn Sie window.onerror auf null setzen, sehen Ihre Benutzer keine durch Ihren Code verursachten JavaScript-Fehler.
\n– 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\u00fccken, muss diese Funktion zur\u00fcckkehren true. Siehe Beispiel 3 unten.
\n– Eine Variable oder Eigenschaft, die Null oder eine g\u00fcltige Funktionsreferenz enth\u00e4lt.
\nWenn Sie eine Fehlerbehandlungsfunktion schreiben, haben Sie drei M\u00f6glichkeiten, Fehler zu melden:
\n– Verfolgen Sie Fehler, aber lassen Sie zu, dass sie \u00fcber einen Standard-JavaScript-Dialog gemeldet werden (verwenden Sie eine Fehlerbehandlungsfunktion, die \u201efalse\u201c oder keinen Wert zur\u00fcckgibt).
\n– Melden Sie Fehler selbst und deaktivieren Sie den Standarddialog (verwenden Sie eine Fehlerbehandlungsfunktion, die Folgendes zur\u00fcckgibt true).
\n– Alle Fehlermeldungen deaktivieren (im onError-Handler auf Null setzen).<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde<\/p>\n
F\u00fchren Sie JavaScript aus, wenn beim Laden eines Bildes ein Fehler auftritt:<\/p>\n
\r\n<img src="image.gif" onerror="myFunction()">\r\n<\/pre>\nBeispiel 1: Handler mit Nullwert. In diesem IMG-Tag unterdr\u00fcckt der Code onError=“null“ Fehlermeldungen, wenn beim Laden des Bildes ein Fehler auftritt.<\/p>\n
\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">\r\n<\/pre>\nBeispiel 2: Null-Handler f\u00fcr ein Fenster. Der onError-Handler f\u00fcr ein Fenster kann nicht \u00fcber HTML ausgedr\u00fcckt werden. Daher m\u00fcssen Sie im SCRIPT-Tag alles Notwendige in Kleinbuchstaben eingeben. Der folgende Code weist dem onError-Handler f\u00fcr das gesamte Fenster null zu, nicht nur f\u00fcr das Image-Objekt. Dadurch werden alle JavaScript-Fehlermeldungen unterdr\u00fcckt, einschlie\u00dflich derjenigen f\u00fcr das Image-Objekt.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">\r\n<\/pre>\nWenn das Image-Objekt jedoch \u00fcber einen eigenen speziellen onError-Handler verf\u00fcgt, wird dieser Handler ausgef\u00fchrt, wenn beim Bild ein Fehler auftritt. Dies liegt daran, dass window.onerror=null JavaScript-Fehlermeldungen unterdr\u00fcckt, nicht onError-Handler.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\nfunction myErrorFunc() {\r\n alert("The image had a nasty error.")\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">\r\n<\/pre>\nIm folgenden Beispiel unterdr\u00fcckt window.onerror=null alle Fehlermeldungen. Ohne onerror=null verursacht der Code einen Stapel\u00fcberlauffehler, da es eine unendliche Rekursion gibt.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = null;\r\nfunction testErrorFunction() {\r\n testErrorFunction();\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="testErrorFunction()">\r\ntest message\r\n<\/BODY>\r\n<\/pre>\nBeispiel 3: Fehlerbehandlungsfunktion. Hier wird die Funktion myOnError definiert, die JavaScript-Fehler abf\u00e4ngt. Diese Funktion verwendet drei Arrays, um die Nachricht, die URL und die problematische Zeichenfolge f\u00fcr jeden Fehler zu speichern. Wenn der Benutzer auf die Schaltfl\u00e4che \u201eDisplay Error Report\u201c klickt, \u00f6ffnet die Funktion \u201edisplayErrors\u201c ein Fenster und generiert darin eine Fehlermeldung. Beachten Sie, dass diese Funktion zur\u00fcckkehrt true um den Standard-JavaScript-Fehlerdialog zu unterdr\u00fccken.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = myOnError\r\nmsgArray = new Array()\r\nurlArray = new Array()\r\nlnoArray = new Array()\r\nfunction myOnError(msg, url, lno) {\r\n msgArray[msgArray.length]\r\n= msg\r\n urlArray[urlArray.length] = url\r\n lnoArray[lnoArray.length]\r\n= lno\r\n return true\r\n}\r\nfunction displayErrors() {\r\n win2=window.open('','window2','scrollbars=yes')\r\n win2.document.writeln('<B>Error Report<\/B><P>')\r\n for (var i=0; i < msgArray.length; i++) {\r\n win2.document.writeln('<B>Error in file:<\/B> '\r\n+ urlArray[i] + '<BR>')\r\n win2.document.writeln('<B>Line\r\nnumber:<\/B> ' + lnoArray[i] + '<BR>')\r\n win2.document.writeln('<B>Message:<\/B> '\r\n+ msgArray[i] + '<P>')\r\n }\r\n win2.document.close()\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="noSuchFunction()">\r\n<FORM>\r\n<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">\r\n<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">\r\n<\/FORM>\r\n<\/pre>\nDieses Beispiel liefert die Ausgabe:<\/p>\n
\r\nError Report\r\nError in file:\r\nfile:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 34\r\nMessage: unterminated string literal\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number:\r\n34\r\nMessage: missing ) after argument list\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 30\r\nMessage: noSuchFunction is not defined\r\n<\/pre>\nBeispiel 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.<\/p>\n
\r\n<SCRIPT>\r\nfunction badImage(theImage) {\r\n alert('Error: ' + theImage.name + ' did not load properly.')\r\n}\r\n<\/SCRIPT>\r\n<FORM>\r\n<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">\r\n<\/FORM>\r\n<\/pre>\nonfocus<\/span><\/h2>\n\u2013 Den focus auf ein Element setzen. F\u00fchrt JavaScript-Code aus, wenn das focus-ereignis auftritt; Das hei\u00dft, wenn ein Fenster, ein Rahmen oder eine Reihe von Rahmen den focus erh\u00e4lt oder wenn ein Formularelement den focus erh\u00e4lt. Das onfocus-Ereignis tritt auf, wenn ein Element den focus erh\u00e4lt. Das onfocus-Ereignis wird h\u00e4ufig in Eingabefeldern verwendet. Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style und title<\/p>\n
F\u00fchren Sie JavaScript aus, wenn das Eingabefeld den Fokus erh\u00e4lt:<\/p>\n
\r\n<input type="text" onfocus="myFunction()">\r\n<\/pre>\nHier wird der onFocus-Handler f\u00fcr das valueField-Textarea-Objekt verwendet, um die valueCheck-Funktion aufzurufen.<\/p>\n
\r\n<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">\r\n<\/pre>\nonfocusin<\/span><\/h2>\nDas onfocusin-Ereignis tritt auf, wenn ein Element den Fokus erh\u00e4lt. Das onfocusin-Ereignis wird h\u00e4ufig in Eingabefeldern verwendet. Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style, und title<\/p>\n
F\u00fchren Sie JavaScript aus, wenn ein Eingabefeld den Fokus erh\u00e4lt:<\/p>\n
\r\n<input type="text" onfocusin="myFunction()">\r\n<\/pre>\nonfocusout<\/span><\/h2>\nDas onfocusout-Ereignis tritt auf, wenn ein Element den Fokus verliert. Das Ereignis onfocusout wird h\u00e4ufig in Eingabefeldern verwendet. Das onfocusout-Ereignis wird h\u00e4ufig w\u00e4hrend der Formularvalidierung verwendet (wenn der Benutzer das Formularfeld verl\u00e4sst). Alle HTML-Elemente AUSSER: base, bdo, br, head, html, iframe, meta, param, script, style, und title<\/p>\n
F\u00fchren Sie JavaScript aus, wenn ein Eingabefeld kurz davor steht, den Fokus zu verlieren:<\/p>\n
\r\n<input type="text" onfocusout="myFunction()">\r\n<\/pre>\nonfullscreenchange<\/span><\/h2>\nDas 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\u00f6tigt ein bestimmtes Pr\u00e4fix (siehe Klammern): 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)<\/p>\n
Zeigen Sie Text an, wenn Sie eine Seite im Vollbildmodus anzeigen:<\/p>\n
\r\ndocument.addEventListener("fullscreenchange", function() {\r\n output.innerHTML = "fullscreenchange event fired!";\r\n});\r\n<\/pre>\nVerwenden Sie Pr\u00e4fixe f\u00fcr browser\u00fcbergreifenden Code:<\/p>\n
\r\n\/* Standard-Syntax *\/\r\ndocument.addEventListener("fullscreenchange", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenchange", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenchange", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenchange", function() {\r\n ...\r\n});\r\n<\/pre>\nonfullscreenerror<\/span><\/h2>\nDas 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.<\/p>\n
Warntext, wenn das Element nicht im Vollbildmodus angezeigt werden kann:<\/p>\n
\r\ndocument.addEventListener("fullscreenerror", function() {\r\n alert("Fullscreen denied")\r\n});\r\n<\/pre>\nVerwenden Sie Pr\u00e4fixe f\u00fcr browser\u00fcbergreifenden Code:<\/p>\n
\r\n\/* Standard-Syntax *\/\r\ndocument.addEventListener("fullscreenerror", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenerror", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenerror", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenerror", function() {\r\n ...\r\n});\r\n<\/pre>\nonhashchange<\/span><\/h2>\n– \u00c4ndern der Bindung eines Teils der Adresse. Unterst\u00fctzung f\u00fcr HTML-Tags: body. Das onhashchange-Ereignis tritt auf, wenn \u00c4nderungen am Ankerteil (beginnt mit dem \u201e#\u201c-Zeichen) der aktuellen URL vorgenommen wurden. Ein Beispiel daf\u00fcr, was der Ankerteil tats\u00e4chlich ist: Nehmen wir an, die aktuelle URL lautet http:\/\/www.example.com\/test.htm#part2 \u2013 der Ankerteil dieser URL w\u00e4re #part2.
\nUm dieses Ereignis auszul\u00f6sen, k\u00f6nnen Sie:
\n\u00c4ndern Sie den Bindungsteil, indem Sie die Eigenschaft location.hash oder location.href auf das Objekt festlegen Location
\nGehen Sie mit einem anderen Lesezeichen zur aktuellen Seite (verwenden Sie die Schaltfl\u00e4chen \u201eZur\u00fcck\u201c oder \u201eVorw\u00e4rts\u201c)
\nKlicken Sie auf den Lesezeichen-Ankerlink<\/p>\n
JavaScript ausf\u00fchren, wenn sich ein Teil des Ankers ge\u00e4ndert hat:<\/p>\n
\r\n<body onhashchange="myFunction()">\r\n<\/pre>\nSo weisen Sie einem Objekt ein \u201eonhashchange\u201c-Ereignis zu window:<\/p>\n
\r\nwindow.onhashchange = myFunction;\r\n<\/pre>\noninput<\/span><\/h2>\n\u2013 Beginn der Dateneingabe. Das oninput-Ereignis tritt auf, wenn das Element Benutzereingaben empf\u00e4ngt. Dieses Ereignis tritt auf, wenn sich der Wert eines Elements \u00e4ndert input oder textarea. Dieses Ereignis \u00e4hnelt dem onchange-Ereignis. Der Unterschied besteht darin, dass das oninput-Ereignis unmittelbar nach der Wert\u00e4nderung des Elements auftritt, w\u00e4hrend onchange auftritt, wenn das Element den Fokus verliert, nachdem sich sein Inhalt ge\u00e4ndert hat. Ein weiterer Unterschied besteht darin, dass das onchange-Ereignis auch f\u00fcr Elemente funktioniert select. Unterst\u00fctzung f\u00fcr 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<\/p>\n
F\u00fchren Sie JavaScript aus, wenn der Benutzer etwas in ein Feld schreibt input:<\/p>\n
\r\n<input type="text" oninput="myFunction()">\r\n<\/pre>\nBereichsschieberegler \u2013 So aktualisieren Sie den Schiebereglerwert dynamisch:<\/p>\n
\r\n<input type="range" oninput="myFunction(this.value)">\r\n<\/pre>\noninvalid<\/span><\/h2>\n\u2013 Der Artikel ist besch\u00e4digt. Das oninvalid-Ereignis tritt auf, wenn das gesendete input-element ung\u00fcltig ist. Beispielsweise ist ein Eingabefeld ung\u00fcltig, wenn das erforderliche Attribut festgelegt und das Feld leer ist (das erforderliche Attribut gibt an, dass das Eingabefeld ausgef\u00fcllt werden muss, bevor das Formular gesendet werden kann). Unterst\u00fctzung f\u00fcr HTML-Tags: input<\/p>\n
Warnung vor Text, wenn das Eingabefeld ung\u00fcltig ist:<\/p>\n
\r\n<input type="text" oninvalid="alert('Sie m\u00fcssen das Formular ausf\u00fcllen!');" required>\r\n<\/pre>\nWarntext, wenn das Eingabefeld weniger als 6 Zeichen enth\u00e4lt:<\/p>\n
\r\n\u0418\u043c\u044f: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("Muss 6 oder mehr Zeichen enthalten");\r\n}\r\n<\/script>\r\n<\/pre>\nWarntext, wenn das Eingabefeld eine Zahl enth\u00e4lt, die kleiner als 2 oder gr\u00f6\u00dfer als 5 ist:<\/p>\n
\r\n\u041d\u043e\u043c\u0435\u0440: <input type="number" id="myInput" name="quantity" min="2" max="5" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("Sie m\u00fcssen eine Zahl zwischen 2 und 5 w\u00e4hlen. Sie haben gew\u00e4hlt: " + this.value);\r\n}\r\n<\/script>\r\n<\/pre>\nonkeydown<\/span><\/h2>\n\u2013 Taste gedr\u00fcckt. Das onkeydown-Ereignis tritt auf, wenn der Benutzer eine Taste (auf der Tastatur) dr\u00fcckt. 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\u00fcckgibt, wird das KeyPress-Ereignis nicht ausgel\u00f6st. Dadurch wird verhindert, dass KeyPress-Ereignisse ausgel\u00f6st werden, wenn der Benutzer eine Taste gedr\u00fcckt h\u00e4lt.<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, 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 \u00fcber einem Formular die Position des Formularelements dar.
\nwhich – ASCII-Wert der gedr\u00fcckten Taste. Um den tats\u00e4chlichen Buchstaben, die Zahl oder das Zeichen der gedr\u00fcckten Taste abzurufen, verwenden Sie die Methode String.fromCharCode. Um diese Eigenschaft festzulegen, wenn der ASCII-Wert unbekannt ist, verwenden Sie die Methode String.charCodeAt.
\nmodifiers – Enth\u00e4lt eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedr\u00fcckt wurden.<\/p>\n
JavaScript ausf\u00fchren, wenn der Benutzer eine Taste dr\u00fcckt:<\/p>\n
\r\n<input type="text" onkeydown="myFunction()">\r\n<\/pre>\nVerwenden Sie \u201eonkeydown\u201c mit dem Ereignis \u201eonkeyup\u201c:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nFunktion blockA verwendet, um die \u00fcber die Tastatur in das Texteingabefeld textentry eingegebenen Zeichen zu berechnen. Wenn der Benutzer \u201ea\u201c oder \u201eA\u201c eingibt, gibt die Funktion \u201efalse\u201c zur\u00fcck 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\u00fcckten Taste der Variable keyChar zu. Operator if berechnet keyChar und gibt zur\u00fcck false f\u00fcr bestimmte Zeichen:<\/p>\n
\r\n<form name="main">\r\n <input name="textentry"\r\ntype=text size=10 maxlength=10>\r\n<\/form>\r\n<script>\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nreturn false;\r\n}\r\ndocument.main.textentry.onkeydown = blockA;\r\n<\/script>\r\n<\/pre>\nonkeypress<\/span><\/h2>\n– Eine Taste wird gedr\u00fcckt und dann losgelassen. F\u00fchrt JavaScript-Code aus, wenn das KeyPress-Ereignis auftritt; das hei\u00dft, wenn der Benutzer die Taste gedr\u00fcckt h\u00e4lt. Das onkeypress-Ereignis tritt auf, wenn der Benutzer eine Taste (auf der Tastatur) dr\u00fcckt. Das onkeypress-Ereignis wird nicht f\u00fcr alle Tasten (z. B. ALT, STRG, UMSCHALT, ESC) in allen Browsern ausgel\u00f6st. Um nur zu erkennen, ob der Benutzer eine Taste gedr\u00fcckt hat, verwenden Sie stattdessen das Ereignis onkeydown, da es f\u00fcr 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\u00f6st, wenn onKeyDown etwas anderes zur\u00fcckgibt als false. Das KeyPress-Ereignis tritt wiederholt auf, bis der Benutzer die Taste losl\u00e4sst. Sie k\u00f6nnen einzelne KeyPress-Ereignisse abbrechen.<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, 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 \u00dcberformereignis die Position eines Formularelements dar.
\nwhich – ASCII-Wert der gedr\u00fcckten Taste. Um den tats\u00e4chlichen Buchstaben, die Zahl oder das Zeichen der gedr\u00fcckten Taste abzurufen, verwenden Sie die Methode String.fromCharCode. Um diese Eigenschaft festzulegen, wenn der ASCII-Wert unbekannt ist, verwenden Sie die Methode String.charCodeAt.
\nmodifiers – Enth\u00e4lt eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedr\u00fcckt wurden.<\/p>\n
JavaScript ausf\u00fchren, wenn der Benutzer eine Taste dr\u00fcckt:<\/p>\n
\r\n<input type="text" onkeypress="myFunction()">\r\n<\/pre>\nHier erfasst die Methode \u201ecaptureEvents\u201c Tastatureingaben und der Handler \u201eonKeyPress\u201c ruft die Funktion \u201eblockA\u201c auf, um nach Tastendr\u00fccken zu suchen. Wenn die Tasten \u201ea\u201c oder \u201ez\u201c gedr\u00fcckt werden, scrollt die Funktion durch das Fenster Navigator‘.<\/p>\n
\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nself.scrollBy(10,10);\r\nelse if(keyChar == 'Z' || keyChar == 'z')\r\nself.scrollBy(-10,-10);\r\nelse return false;\r\n}\r\ndocument.captureEvents(Event.KEYPRESS);\r\ndocument.onkeypress = blockA;\r\n<\/pre>\nonkeyup<\/span><\/h2>\n\u2013 Taste losgelassen Das onkeyup-Ereignis tritt auf, wenn der Benutzer eine Taste (auf der Tastatur) losl\u00e4sst. 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.<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, 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 \u00dcberformereignis die Position eines Formularelements dar.
\nwhich – ASCII-Wert der gedr\u00fcckten Taste. Um den tats\u00e4chlichen Buchstaben, die Zahl oder das Zeichen der gedr\u00fcckten Taste abzurufen, verwenden Sie die Methode String.fromCharCode. Um diese Eigenschaft festzulegen, wenn der ASCII-Wert unbekannt ist, verwenden Sie die Methode String.charCodeAt.
\nmodifiers – Enth\u00e4lt eine Liste der Modifizierertasten, die beim Eintreten des Ereignisses gedr\u00fcckt wurden.<\/p>\n
F\u00fchren Sie JavaScript aus, wenn der Benutzer die Taste losl\u00e4sst:<\/p>\n
\r\n<input type="text" onkeyup="myFunction()">\r\n<\/pre>\nVerwenden Sie \u201eonkeydown\u201c mit dem Ereignis \u201eonkeyup\u201c:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nGeben Sie den tats\u00e4chlich ausgegebenen Schl\u00fcssel im Textfeld aus:<\/p>\n
\r\n\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f: <input type="text" id="fname" onkeyup="myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n var x = document.getElementById("fname").value;\r\n document.getElementById("demo").innerHTML = x;\r\n}\r\n<\/script>\r\n<\/pre>\nHier erfasst die Methode \u201ecaptureEvents\u201c Tastatureingaben und der Handler \u201eonKeyUp\u201c ruft die Funktion \u201eKey_Up\u201c auf. Die alert-methode der Funktion \u00f6ffnet ein Dialogfeld, um den Wert der gedr\u00fcckten Taste anzuzeigen:<\/p>\n
\r\nfunction Key_Up(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nalert("Hold '" + keyChar +"' again for me, okay?");\r\n}\r\ndocument.onkeyup=Key_Up;\r\ndocument.captureEvents(Event.KEYUP);\r\n<\/pre>\nonload<\/span><\/h2>\n\u2013 Artikel geladen. Das Onload-Ereignis tritt auf, wenn ein Objekt geladen wurde. Das onload-Ereignis wird am h\u00e4ufigsten f\u00fcr das Body-Element verwendet, um ein Skript auszuf\u00fchren, nachdem die Webseite den gesamten Inhalt (einschlie\u00dflich Bilder, Skriptdateien, CSS-Dateien usw.) vollst\u00e4ndig geladen hat. Mithilfe des onload-Ereignisses kann der Browsertyp und die Browserversion des Besuchers \u00fcberpr\u00fcft und anhand der erhaltenen Informationen die entsprechende Version der Webseite geladen werden. Das onload-Ereignis kann auch zur Verarbeitung von Cookies verwendet werden.<\/p>\n
Der onLoad-Handler wird im BODY- oder FRAMESET-Tag verwendet, zum Beispiel BODY onLoad=“…“. F\u00fcr 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\u00fcr Bilder gibt der onLoad-Handler das Skript an, das bei der Ausgabe des Bildes ausgef\u00fchrt werden soll. Verwechseln Sie die Bildausgabe nicht mit dem Hochladen von Bildern. Sie k\u00f6nnen 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 \u00e4ndern, wird onLoad bei jeder Bildausgabe ausgef\u00fchrt, nicht nur, wenn die Bilder in den Speicher geladen werden.<\/p>\n
Wenn Sie einen onLoad-Handler f\u00fcr ein Image-Objekt angeben, das ein Schleifen-GIF (Mehrbild-GIF) ausgibt, enth\u00e4lt jede Animationsschleife einen onLoad-Handler, und der Handler wird einmal f\u00fcr jede Schleife ausgef\u00fchrt. Sie k\u00f6nnen den onLoad-Handler verwenden, um eine JavaScript-Animation zu erstellen, indem Sie die src-Eigenschaft des Image-Objekts wiederholt festlegen.<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nwidth, height – F\u00fcr ein Ereignis \u00fcber einem Fenster, aber nicht \u00fcber einer Ebene, stellen diese Eigenschaften die Breite und H\u00f6he des Fensters dar.<\/p>\n
F\u00fchren Sie JavaScript sofort nach dem Laden der Seite aus:<\/p>\n
\r\n<body onload="myFunction()">\r\n<\/pre>\nVerwenden Sie in JavaScript die Methode addEventListener():<\/p>\n
\r\nobject.addEventListener("load", myScript);\r\n<\/pre>\nZeigt eine Nachricht an, wenn die Seite geladen wird. Hier gibt der onLoad-Handler eine Begr\u00fc\u00dfung aus, nachdem die Seite geladen wurde.<\/p>\n
\r\n<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>\r\n<\/pre>\nBeim 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\u00fcgt \u00fcber einen onLoad-Handler, der die displayAlert-Funktion aufruft, die eine Meldung anzeigt. F\u00fcr ein Bild, das durch ein IMG-Tag erstellt wurde, zeigt das Warndialogfeld den Bildnamen an. F\u00fcr ein vom Bildkonstruktor erstelltes Bild zeigt die Warnung eine Meldung ohne den Bildnamen an. Dies liegt daran, dass der onLoad-Handler f\u00fcr das vom Image-Konstruktor erstellte Objekt der Name einer Funktion sein muss und keine Parameter f\u00fcr die displayAlert-Funktion angeben kann.<\/p>\n
\r\n<SCRIPT>\r\nimageA = new Image(50,50)\r\nimageA.onload=displayAlert\r\nimageA.src="cyanball.gif"\r\nfunction displayAlert(theImage) {\r\n if (theImage==null) {\r\n alert('An image loaded')\r\n }\r\n else alert(theImage.name + ' has been loaded.')\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>\r\n<\/pre>\nGIF-Animationsausgabe cycles in Schleife. Das hier angezeigte Bild ist \u201ebirdie.gif\u201c, ein animiertes GIF-Bild. Der onLoad-Handler erh\u00f6ht die cycles-Variable, die die Anzahl der Animationszyklen cycles verfolgt. Um den Wert der Zyklen anzuzeigen, klickt der Benutzer auf die Schaltfl\u00e4che Count Loops.<\/p>\n
\r\n<SCRIPT>\r\nvar cycles=0\r\n<\/SCRIPT>\r\n<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">\r\n<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">\r\n<\/pre>\n\u00c4ndern 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\u00e4chste 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 \u201echangeAnimation\u201c nicht selbst aufruft, nachdem die Eigenschaft \u201esrc\u201c des Objekts \u201eImage\u201c ge\u00e4ndert wurde. Dies geschieht, weil die src-Eigenschaft ge\u00e4ndert wird, der onLoad-Handler des Bildes aktiviert ist und die Funktion \u201echangeAnimation\u201c aufgerufen wird.<\/p>\n
\r\n<SCRIPT>\r\nvar whichImage=0\r\nvar maxImages=5\r\nfunction changeAnimation(theImage) {\r\n ++whichImage\r\n if (whichImage <= maxImages) {\r\n var imageName="!anim" + whichImage + ".gif"\r\n theImage.src=imageName\r\n } else {\r\n whichImage=-1\r\n return\r\n }\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">\r\n<\/pre>\nVerwenden Sie das onload-Ereignis f\u00fcr das img-Element. Benachrichtigung \u201eBild geladen\u201c unmittelbar nach dem Laden des Bildes:<\/p>\n
\r\n<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">\r\n<script>\r\nfunction loadImage() {\r\n alert("Image is loaded");\r\n}\r\n<\/script>\r\n<\/pre>\nVerwenden Sie das onload-Ereignis, um Cookies zu verarbeiten:<\/p>\n
\r\n<body onload="checkCookies()">\r\n<script>\r\nfunction checkCookies() {\r\n var text = "";\r\n if (navigator.cookieEnabled == true) {\r\n text = "Cookies aktiviert.";\r\n } else {\r\n text = "Cookies sind nicht aktiviert.";\r\n }\r\n document.getElementById("demo").innerHTML = text;\r\n}\r\n<\/script>\r\n<\/pre>\nonloadeddata<\/span><\/h2>\n\u2013 Dateidaten geladen. Handler f\u00fcr 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\u00fcgend Daten verf\u00fcgbar sind, um mit der Wiedergabe zu beginnen. Das onloadeddata-Ereignis tritt nach onloadedmetadata und vor oncanplay auf.<\/p>\n
Wenn Medien geladen werden, treten 7 Ereignisse in der folgenden Reihenfolge auf:
\n1. onloadstart
\n2. ondurationchange
\n3. onloadedmetadata
\n4. onloadeddata
\n5. onprogress
\n6. oncanplay
\n7. oncanplaythrough<\/p>\n
JavaScript ausf\u00fchren, wenn Daten f\u00fcr den aktuellen Frame verf\u00fcgbar sind (f\u00fcr Video):<\/p>\n
\r\n<video onloadeddata="myFunction()">\r\n<\/pre>\nJavaScript ausf\u00fchren, wenn Daten f\u00fcr den aktuellen Frame verf\u00fcgbar sind (f\u00fcr Audio):<\/p>\n
\r\n<audio onloadeddata="myFunction()">\r\n<\/pre>\nonloadedmetadata<\/span><\/h2>\n\u2013 Dateimetadaten geladen. Handler f\u00fcr das Ereignis \u201eloadedmetadata\u201c, das auftritt, wenn Metadaten (Dauer, Bildabmessungen (f\u00fcr Video) und Titeltext) f\u00fcr die angegebene Audio-\/Videodatei geladen wurden. Das onloadedmetadata-Ereignis tritt auf, wenn Metadaten f\u00fcr das Medium geladen wurden.<\/p>\n
Metadaten f\u00fcr Audio oder Video bestehen aus:
\nDauer
\nAbmessungen (Video)
\nSpuren<\/p>\n
F\u00fchren Sie JavaScript aus, wenn Sie Videometadaten laden:<\/p>\n
\r\n<video onloadedmetadata="myFunction()">\r\n<\/pre>\n\u0412 JavaScript:<\/p>\n
\r\nobject.onloadedmetadata = function(){myScript};\r\n<\/pre>\nVerwenden Sie in JavaScript die Methode addEventListener():<\/p>\n
\r\nobject.addEventListener("loadedmetadata", myScript);\r\n<\/pre>\nonloadstart<\/span><\/h2>\n\u2013 Beginnen Sie mit dem Laden des Elements. Handler f\u00fcr das loadstart-Ereignis, das auftritt, wenn der Ladevorgang einer Audio-\/Videodatei beginnt.<\/p>\n
onmessage<\/span><\/h2>\n– Meldung erscheint. Das onmessage-Ereignis tritt auf, wenn eine Nachricht \u00fcber eine Ereignisquelle empfangen wird. Das Ereignisobjekt f\u00fcr das onmessage-Ereignis unterst\u00fctzt die folgenden Eigenschaften:
\nDaten \u2013 Enth\u00e4lt die eigentliche Nachricht
\norigin \u2014 URL des Dokuments, das das Ereignis ausgel\u00f6st hat.
\nLastEventId \u2014 ID der letzten im Ereignisstrom gesehenen Nachricht.
\nVerwandte Veranstaltungen:
\nonopen \u2013 tritt auf, wenn die Verbindung zum Server ge\u00f6ffnet ist.
\nonerror \u2013 Tritt auf, wenn ein Problem auftritt<\/p>\n
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“:<\/p>\n
\r\nvar source = new EventSource("demo_sse.php");\r\nsource.onmessage = function(event) {\r\n document.getElementById("myDIV").innerHTML += event.data + "<br>";\r\n};\r\n<\/pre>\nonmousedown<\/span><\/h2>\n\u2013 Maustaste gedr\u00fcckt wird. Handler f\u00fcr das Mousedown-Ereignis, das auftritt, wenn die linke Maustaste gedr\u00fcckt wird. Der Unterschied zum Click-Ereignis besteht darin, dass Click eine Kombination der Mousedown- und Mouseup-Ereignisse ist. F\u00fchrt JavaScript-Code aus, wenn das MouseDown-Ereignis auftritt; das hei\u00dft, wenn der Benutzer eine Maustaste dr\u00fcckt. Wenn onMouseDown zur\u00fcckkehrt false, Standardaktion (Eingabemodus drag, Eingabemodus selection oder Hyperlink-Aktivierung) wird abgebrochen. Die Aktivierung wird durch das MouseDown-Ereignis auf dem Hyperlink ausgel\u00f6st. Wenn der Link aktiviert ist, \u00e4ndert er seine Farbe, um den neuen Status anzuzeigen. Die Standardaktion variiert: Ziehen, Textauswahl, Scrollen oder Zoomen (kombiniert mit Raddr\u00fccken, sofern unterst\u00fctzt)<\/p>\n
Das onmousedown-Ereignis tritt auf, wenn der Benutzer die Maustaste \u00fcber einem HTML-Element dr\u00fcckt. Reihenfolge der Ereignisse f\u00fcr die linke und mittlere Maustaste:
\nonmousedown
\nonmouseup
\nauf Klick
\nReihenfolge der Ereignisse f\u00fcr die rechte Maustaste:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, layerY, pageX, pageY, screenX, screenY- Die Position des Cursors, wenn das MouseDown-Ereignis auftritt.
\nwhich – Stellt 1 f\u00fcr einen linken Mausklick und 3 f\u00fcr einen rechten Mausklick dar.
\nmodifiers – Enth\u00e4lt eine Liste der Modifizierertasten, die beim Auftreten des MouseDown-Ereignisses gedr\u00fcckt wurden.<\/p>\n
Rufen Sie eine Funktion auf, wenn die Maustaste \u00fcber einem Absatz gedr\u00fcckt wird:<\/p>\n
\r\n<p onmousedown="myFunction()">Click the text!<\/p>\r\n<\/pre>\nHier 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 \u201econtainer1\u201c. 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\u00e4lt, wird auf \u201econtainer1\u201c gesetzt, sodass \u201econtainer1\u201c eine eindeutige Kennung f\u00fcr den Absatz und das Bild ist. Das STYLE-Tag erstellt eine Ebene f\u00fcr Container1 und positioniert diese. Der folgende JavaScript-Code definiert die Handler onMouseDown, onMouseUp und onMouseMove. Mithilfe von Stylesheets wird das Bild zun\u00e4chst wie folgt definiert und positioniert:<\/p>\n
\r\n<HEAD>\r\n<STYLE type="text\/css">\r\n #container1 {\r\nposition:absolute; left:200; top:200}\r\n<\/STYLE>\r\n<\/HEAD>\r\n<BODY>\r\n<P ID="container1">\r\n<img src="backgrnd.gif" name="myImage" width=96 height=96>\r\n<\/P>\r\n<\/BODY>\r\n<\/pre>\nIn diesem Code erfasst die Methode \u201ecaptureEvents\u201c die Ereignisse \u201eMouseUp\u201c und \u201eMouseDown\u201c. Zur Behandlung dieser Ereignisse werden jeweils die Funktionen DRAG_begindrag und DRAG_enddrag aufgerufen. Wenn der Benutzer die linke Maustaste dr\u00fcckt, startet die Funktion DRAG_begindrag, die MouseMove-Ereignisse erfasst und die Funktion DRAG_drag anweist, diese zu verarbeiten. Anschlie\u00dfend 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\u00e4sst, 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.<\/p>\n
\r\n<SCRIPT>\r\ncontainer1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);\r\ncontainer1.onmousedown=DRAG_begindrag;\r\ncontainer1.onmouseup=DRAG_enddrag;\r\nvar DRAG_lastX, DRAG_lastY, DRAG_dragging;\r\nfunction DRAG_begindrag(e) {\r\nif (e.which == 1) {\r\nwindow.captureEvents(Event.MOUSEMOVE);\r\n window.onmousemove=DRAG_drag;\r\nDRAG_lastX=e.pageX;\r\nDRAG_lastY=e.pageY;\r\nDRAG_dragging=true;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Hier finden Sie einige Arbeiten zum Umgang mit rechten Mausklicks*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_enddrag(e) {\r\nif (e.which == 1) {\r\nwindow.releaseEvents(Event.MOUSEMOVE);\r\n window.onmousemove=null\r\nDRAG_dragging=false;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Hier finden Sie einige Arbeiten zum Umgang mit rechten Mausklicks*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_drag(e) {\r\nif (DRAG_dragging) {\r\n\/*Diese Funktion wird nur aufgerufen, wenn MOUSEMOVE erfasst wird*\/\r\nmoveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);\r\nDRAG_lastX = e.pageX;\r\nDRAG_lastY = e.pageY;\r\nreturn false;\r\n}\r\nelse {\r\nreturn true;\r\n}\r\n}\r\n<\/SCRIPT>\r\n<\/pre>\nonmouseenter<\/span><\/h2>\n\u2013 Der Mauszeiger befindet sich \u00fcber einem Element. Ein Handler f\u00fcr das mouseenter-Ereignis, das auftritt, wenn der Mauszeiger in den Bereich des Elements eintritt. Im Gegensatz zum mouseover entsteht beim mouseenter-Ereignis keine Blase (\u201eBubble\u201c), das hei\u00dft, 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\u00e4ufig in Verbindung mit dem Ereignis onmouseleave verwendet, das auftritt, wenn der Mauszeiger ein Element verl\u00e4sst. Das onmouseenter-Ereignis \u00e4hnelt 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).<\/p>\n
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\u00df sein und erhebliche Leistungsprobleme verursachen. In solchen F\u00e4llen ist es besser, mit mouseenter-Ereignissen umzugehen. In Kombination mit dem entsprechenden mouseleave-Ereignis (das auf ein Element ausgel\u00f6st wird, wenn die Maus den Inhaltsbereich verl\u00e4sst) verh\u00e4lt sich das mouseenter-Ereignis sehr \u00e4hnlich wie die CSS:hover-Pseudoklasse.<\/p>\n
Rufen Sie eine Funktion auf, wenn Sie mit der Maus \u00fcber ein Bild fahren:<\/p>\n
\r\n<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseenter = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseenter", myScript);\r\n<\/pre>\nDieses Beispiel zeigt den Unterschied zwischen den Ereignissen onmousemove, onmouseenter und mouseover:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseenter="myEnterFunction()">\r\n <p id="demo2">I will demonstrate onmouseenter!<\/p>\r\n<\/div>\r\n<div onmouseover="myOverFunction()">\r\n <p id="demo3">I will demonstrate onmouseover!<\/p>\r\n<\/div>\r\n<\/pre>\nDas folgende triviale Beispiel verwendet das Ereignis \u201emouseenter\u201c, um den Rand eines div-Elements zu \u00e4ndern, wenn die Maus in den zugewiesenen Bereich eintritt. Anschlie\u00dfend wird der Liste ein Element mit der Ereignisnummer \u201emouseenter\u201c oder \u201emouseleave\u201c hinzugef\u00fcgt.<\/p>\n
\r\n<SCRIPT>\r\nvar enterEventCount = 0;\r\nvar leaveEventCount = 0;\r\nconst mouseTarget = document.getElementById("mouseTarget");\r\nconst unorderedList = document.getElementById("unorderedList");\r\nmouseTarget.addEventListener("mouseenter", (e) => {\r\n mouseTarget.style.border = "5px dotted orange";\r\n enterEventCount++;\r\n addListItem("This is mouseenter event " + enterEventCount + ".");\r\n});\r\nmouseTarget.addEventListener("mouseleave", (e) => {\r\n mouseTarget.style.border = "1px solid #333";\r\n leaveEventCount++;\r\n addListItem("This is mouseleave event " + leaveEventCount + ".");\r\n});\r\nfunction addListItem(text) {\r\n \/\/ Erstellen Sie einen neuen Textknoten mit dem bereitgestellten Text\r\n var newTextNode = document.createTextNode(text);\r\n \/\/ Erstellen Sie ein neues Element li\r\n var newListItem = document.createElement("li");\r\n \/\/ F\u00fcgen Sie einem Element einen Textknoten hinzu li\r\n newListItem.appendChild(newTextNode);\r\n \/\/ F\u00fcgen Sie das neu erstellte Listenelement zur Liste hinzu\r\n unorderedList.appendChild(newListItem);\r\n}\r\n<SCRIPT>\r\n<style>\r\n#mouseTarget {\r\n box-sizing: border-box;\r\n width: 15rem;\r\n border: 1px solid #333;\r\n}\r\n<\/style>\r\n<div id="mouseTarget">\r\n <ul id="unorderedList">\r\n <li>No events yet!<\/li>\r\n <\/ul>\r\n<\/div>\r\n<\/pre>\nonmouseleave<\/span><\/h2>\n\u2013 Der Mauszeiger hat das Element verlassen. Ein Handler f\u00fcr das mouseleave-Ereignis, das auftritt, wenn der Mauszeiger den Bereich des Elements verl\u00e4sst. Im Gegensatz zu mouseout entsteht beim mouseEnter-Ereignis keine Blase (\u201eBlase\u201c), das hei\u00dft, 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\u00e4sst. Das onmouseleave-Ereignis wird h\u00e4ufig in Verbindung mit dem onmouseenter-Ereignis verwendet, das auftritt, wenn der Mauszeiger ein Element betritt. Das onmouseleave-Ereignis \u00e4hnelt dem onmouseout-Ereignis. Der Unterschied besteht darin, dass das onmouseleave-Ereignis nicht in die Luft sprudelt (sich nicht in der Dokumenthierarchie nach oben ausbreitet).<\/p>\n
Das mouseleave-Ereignis wird ausgel\u00f6st, wenn sich der Cursor eines Manipulators (normalerweise einer Maus) au\u00dferhalb der Grenzen eines Elements bewegt. mouseleave und mouseout sind \u00e4hnlich, unterscheiden sich jedoch darin, dass mouseleave im Gegensatz zu mouseout nicht angezeigt wird. Das bedeutet, dass \u201emouseleave\u201c ausgel\u00f6st wird, wenn der Cursor die Grenzen eines Elements und aller seiner untergeordneten Elemente verl\u00e4sst, w\u00e4hrend \u201emouseout\u201c ausgel\u00f6st wird, wenn der Cursor die Grenzen eines Elements oder eines seiner untergeordneten Elemente verl\u00e4sst (auch wenn sich der Cursor noch innerhalb des Elements befindet).<\/p>\n
Rufen Sie eine Funktion auf, wenn sich der Mauszeiger au\u00dferhalb des Bildes bewegt:<\/p>\n
\r\n<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseleave = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseleave", myScript);\r\n<\/pre>\nDieses Beispiel zeigt den Unterschied zwischen den Ereignissen onmousemove, onmouseleave und onmouseout:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseleave="myLeaveFunction()">\r\n <p id="demo2">I will demonstrate onmouseleave!<\/p>\r\n<\/div>\r\n<div onmouseout="myOutFunction()">\r\n <p id="demo3">I will demonstrate onmouseout!<\/p>\r\n<\/div>\r\n<\/pre>\nDie mouseout-Dokumentation enth\u00e4lt ein Beispiel, das den Unterschied zwischen mouseout und mouseleave veranschaulicht. Das folgende Beispiel zeigt, wie Sie mit mouseout das Delegationsprinzip des mouseleave-Ereignisses simulieren.<\/p>\n
\r\n<ul id="test">\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 1-1<\/li>\r\n <li>item 1-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 2-1<\/li>\r\n <li>item 2-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n<\/ul>\r\n<script>\r\n var delegationSelector = ".leave-sensitive";\r\n document.getElementById("test").addEventListener(\r\n "mouseout",\r\n function (event) {\r\n var target = event.target,\r\n related = event.relatedTarget,\r\n match;\r\n \/\/ search for a parent node matching the delegation selector\r\n while (\r\n target &&\r\n target != document &&\r\n !(match = matches(target, delegationSelector))\r\n ) {\r\n target = target.parentNode;\r\n }\r\n\r\n \/\/ exit if no matching node has been found\r\n if (!match) {\r\n return;\r\n }\r\n \/\/ loop through the parent of the related target to make sure that it's not a child of the target\r\n while (related && related != target && related != document) {\r\n related = related.parentNode;\r\n }\r\n \/\/ exit if this is the case\r\n if (related == target) {\r\n return;\r\n }\r\n \/\/ the "delegated mouseleave" handler can now be executed\r\n \/\/ change the color of the text\r\n target.style.color = "orange";\r\n \/\/ reset the color after a small amount of time\r\n setTimeout(function () {\r\n target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n );\r\n \/\/ function used to check if a DOM element matches a given selector\r\n \/\/ the following code can be replaced by this IE8 compatible function: https:\/\/gist.github.com\/2851541\r\n function matches(elem, selector) {\r\n \/\/ the matchesSelector is prefixed in most (if not all) browsers\r\n return elem.matchesSelector(selector);\r\n }\r\n<\/script>\r\n<\/pre>\nonmousemove<\/span><\/h2>\n– Der Mauszeiger wird \u00fcber das Element bewegt. Handler f\u00fcr das mousemove-Ereignis, das auftritt, wenn der Mauszeiger \u00fcber ein Element bewegt wird.
\ntype – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Die Position des Cursors, als das Ereignis auftrat MouseMove.<\/p>\n
JavaScript:<\/p>\n
\r\nobject.onmousemove = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mousemove", myScript);\r\n<\/pre>\nRufen Sie eine Funktion auf, wenn Sie mit der Maus \u00fcber ein div-Element fahren:<\/p>\n
\r\n<div onmousemove="myFunction()">Move the cursor over me<\/div>\r\n<\/pre>\nIm folgenden Beispiel werden die Ereignisse \u201emousedown\u201c, \u201emousemove\u201c und \u201emouseup\u201c verwendet, um dem Benutzer das Zeichnen auf der HTML-Zeichenfl\u00e4che zu erm\u00f6glichen. Die Funktionsweise ist einfach: Die Linienst\u00e4rke 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\u00f6st wird. Wir speichern zun\u00e4chst die x- und y-Koordinaten des Mauszeigers in x- und y-Variablen und setzen dann isDrawing auf true. Wenn sich der Mauszeiger \u00fcber die Seite bewegt, wird das mousemove-Ereignis ausgel\u00f6st. 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\u00fcckkehrt, 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.<\/p>\n
\r\n<script>\r\n\/\/ When true, moving the mouse draws on the canvas\r\nlet isDrawing = false;\r\nlet x = 0;\r\nlet y = 0;\r\nconst myPics = document.getElementById("myPics");\r\nconst context = myPics.getContext("2d");\r\n\/\/ event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.\r\n\/\/ Add the event listeners for mousedown, mousemove, and mouseup\r\nmyPics.addEventListener("mousedown", (e) => {\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n isDrawing = true;\r\n});\r\nmyPics.addEventListener("mousemove", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n }\r\n});\r\nwindow.addEventListener("mouseup", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = 0;\r\n y = 0;\r\n isDrawing = false;\r\n }\r\n});\r\nfunction drawLine(context, x1, y1, x2, y2) {\r\n context.beginPath();\r\n context.strokeStyle = "black";\r\n context.lineWidth = 1;\r\n context.moveTo(x1, y1);\r\n context.lineTo(x2, y2);\r\n context.stroke();\r\n context.closePath();\r\n}\r\n<\/script>\r\n<style>\r\ncanvas {\r\n border: 1px solid black;\r\n width: 560px;\r\n height: 360px;\r\n}\r\n<\/style>\r\n<h1>Drawing with mouse events<\/h1>\r\n<canvas id="myPics" width="560" height="360"><\/canvas>\r\n<\/pre>\nonmouseout<\/span><\/h2>\n– Der Mauszeiger bewegt sich aus dem Element heraus. Ein Handler f\u00fcr das mouseout-Ereignis, das auftritt, wenn sich der Mauszeiger au\u00dferhalb eines Elements bewegt. F\u00fchrt JavaScript-Code aus, wenn das mouseOut-Ereignis auftritt; Das hei\u00dft, jedes Mal, wenn der Mauszeiger den Bereich (in der Client-Imagemap) oder den Hyperlink verl\u00e4sst. Wenn sich der Mauszeiger von einem Bereich der Client-Imagemap in einen anderen bewegt, erhalten Sie zun\u00e4chst onMouseOut f\u00fcr den ersten Bereich und dann onMouseOver f\u00fcr den zweiten Bereich. Area-Tags, die onMouseOut verwenden, m\u00fcssen \u00fcber ein HREF-Attribut im AREA-Tag verf\u00fcgen. Sie m\u00fcssen im Ereignishandler \u201etrue\u201c zur\u00fcckgeben, wenn Sie die Eigenschaften \u201estatus\u201c oder \u201edefaultStatus\u201c mithilfe von onMouseOver festlegen m\u00f6chten.<\/p>\n
Das onmouseout-Ereignis tritt auf, wenn sich der Mauszeiger au\u00dferhalb eines Elements bewegt. Das Ereignis \u201eonmouseout\u201c wird h\u00e4ufig in Verbindung mit dem Ereignis \u201eonmouseover\u201c verwendet, das auftritt, wenn Sie mit der Maus \u00fcber ein Element fahren. Das onmouseout-Ereignis \u00e4hnelt dem onmouseleave-Ereignis. Der Unterschied besteht darin, dass das onmouseleave-Ereignis nicht in die Luft sprudelt (sich nicht in der Dokumenthierarchie nach oben ausbreitet). <\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Die Position des Cursors, wenn das MouseOut-Ereignis auftritt<\/p>\n
Rufen Sie eine Funktion auf, wenn sich der Mauszeiger au\u00dferhalb des Bildes bewegt:<\/p>\n
\r\n<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nDas folgende Beispiel veranschaulicht den Unterschied zwischen den Ereignissen \u201emouseout\u201c und \u201emouseleave\u201c. Das mouseleave-Ereignis wird zur UL hinzugef\u00fcgt, um die Liste jedes Mal lila zu f\u00e4rben, wenn die Maus die UL verl\u00e4sst. mouseout wird zur Liste hinzugef\u00fcgt, um das Zielelement orange zu f\u00e4rben, wenn die Maus es verl\u00e4sst. Wenn Sie dies versuchen, werden Sie feststellen, dass mouseout an einzelne Listenelemente und mouseleave an die gesamte Liste \u00fcbergeben wird, dank der Elementhierarchie und der Tatsache, dass Listenelemente die Basis-UL verbergen.<\/p>\n
\r\n<script>\r\nconst test = document.getElementById("test");\r\n\/\/ Briefly make the list purple when the mouse moves off the\r\n\/\/ <ul> element\r\ntest.addEventListener(\r\n "mouseleave",\r\n (event) => {\r\n \/\/ highlight the mouseleave target\r\n event.target.style.color = "purple";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 1000);\r\n },\r\n false,\r\n);\r\n\/\/ Briefly make an <li> orange when the mouse moves off of it\r\ntest.addEventListener(\r\n "mouseout",\r\n (event) => {\r\n \/\/ highlight the mouseout target\r\n event.target.style.color = "orange";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n);\r\n<\/script>\r\n<ul id="test">\r\n <li>item 1<\/li>\r\n <li>item 2<\/li>\r\n <li>item 3<\/li>\r\n<\/ul>\r\n<\/pre>\nonmouseover<\/span><\/h2>\n– Der Mauszeiger bewegt sich \u00fcber das Element. Ein Handler f\u00fcr das mouseover-Ereignis, das auftritt, wenn der Mauszeiger \u00fcber ein Element bewegt wird. Das onmouseover-Ereignis tritt auf, wenn der Mauszeiger ein Element betritt. Das onmouseover-Ereignis wird h\u00e4ufig in Verbindung mit dem onmouseout-Ereignis verwendet, das auftritt, wenn der Mauszeiger ein Element verl\u00e4sst. Das onmouseover-Ereignis \u00e4hnelt 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\u00fcr ein Element ausgel\u00f6st, wenn ein Zeigeger\u00e4t (z. B. eine Maus oder ein Trackpad) verwendet wird, um den Cursor \u00fcber das Element oder eines seiner untergeordneten Elemente zu bewegen.<\/p>\n
Rufen Sie eine Funktion auf, wenn Sie mit der Maus \u00fcber ein Bild fahren:<\/p>\n
\r\n<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nStandardm\u00e4\u00dfig wird der HREF-Wert eines Ankers in der Statusleiste unten im Browser angezeigt, wenn der Benutzer mit der Maus \u00fcber den Anker f\u00e4hrt. Im folgenden Beispiel zeigt onMouseOver eine spezielle Meldung an „Click this if you dare.“<\/p>\n
\r\n<A HREF="http:\/\/home.netscape.com\/" onMouseOver="window.status='Click this if you dare!'; return true">Click me<\/A>\r\n<\/pre>\nonmouseup<\/span><\/h2>\n– die Maustaste wird \u00fcber dem Element losgelassen. Ein Handler f\u00fcr das Mouseup-Ereignis, das auftritt, wenn die Maustaste auf einem Element losgelassen wird. Wenn onMouseUp \u201efalse\u201c zur\u00fcckgibt, wird die Standardaktion abgebrochen. Wenn onMouseUp beispielsweise false zur\u00fcckgibt, wenn ein Hyperlink aktiv ist, ist der Link nicht enthalten. Wenn also MouseUp auftritt, w\u00e4hrend der Hyperlink inaktiv ist (z. B. wenn onMouseDown false zur\u00fcckgibt), ist der Link nicht enthalten. Die Aktivierung wird durch das MouseDown-Ereignis auf dem Link verursacht. Wenn der Link aktiv ist, \u00e4ndert er seine Farbe, um den neuen Status anzuzeigen. Das Ereignis onmouseup tritt auf, wenn die Maustaste \u00fcber einem Element losgelassen wird.<\/p>\n
Das Mouseup-Ereignis wird f\u00fcr ein Element ausgel\u00f6st, wenn eine Taste auf einem Zeigeger\u00e4t (z. B. einer Maus oder einem Trackpad) losgelassen wird, w\u00e4hrend sich der Zeiger darin befindet. Mouseup-Ereignisse sind das Gegenteil von Mousedown-Ereignissen.<\/p>\n
Reihenfolge der Ereignisse f\u00fcr die linke und mittlere Maustaste:
\nonmousedown
\nonmouseup
\nauf Klick
\nReihenfolge der Ereignisse f\u00fcr die rechte Maustaste:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Gibt den Ereignistyp an.
\ntarget – Gibt das Objekt an, an das das Ereignis urspr\u00fcnglich gesendet wurde.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Die Position des Cursors, wenn das MouseUp-Ereignis auftritt.
\nwhich – Stellt 1 f\u00fcr die linke Taste und 3 f\u00fcr die rechte Maustaste dar.
\nmodifiers – Enth\u00e4lt eine Liste der Modifizierertasten, die beim Auftreten des MouseUp-Ereignisses gedr\u00fcckt wurden.<\/p>\n
Rufen Sie eine Funktion auf, wenn die Maustaste \u00fcber einem Absatz losgelassen wird:<\/p>\n
\r\n<p onmouseup="mouseUp()">Click the text!<\/p>\r\n<\/pre>\nonmousewheel (onwheel)<\/span><\/h2>\n\u2013 Das Mausrad wird verwendet. Ein Handler wheel f\u00fcr das Radereignis, das auftritt, wenn das Mausrad auf einem Element vorw\u00e4rts oder r\u00fcckw\u00e4rts gescrollt wird. Das Onwheel-Ereignis tritt auf, wenn das Mausrad \u00fcber 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\u00e4\u00dfige veraltete Mausradereignis. Verwechseln Sie das Wheel-Ereignis nicht mit dem Scroll-Ereignis. Das Wheel-Ereignis l\u00f6st nicht unbedingt ein Scroll-Ereignis aus. Beispielsweise ist das Element m\u00f6glicherweise \u00fcberhaupt nicht scrollbar. Zoomaktionen mit dem Rad oder Trackpad l\u00f6sen ebenfalls Radereignisse aus. Das Scroll-Ereignis wird nicht unbedingt durch das Wheel-Ereignis ausgel\u00f6st. Elemente k\u00f6nnen auch mit der Tastatur, durch Ziehen der Bildlaufleiste oder mithilfe von JavaScript gescrollt werden.<\/p>\n
Auch wenn das Radereignis einen Bildlauf ausl\u00f6st, 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 \u00c4nderungen in den ScrollLeft- und ScrollTop-Werten des Ziels im Scroll-Ereignis.<\/p>\n
Das Wheel-Ereignis kann abgebrochen werden. Wenn das Ereignis abgebrochen wird, erfolgt kein Scrollen oder Zoomen. Dies kann zu Leistungsproblemen f\u00fchren, da der Browser auf die Verarbeitung jedes Radereignisses warten muss, bevor er tats\u00e4chlich durch den Inhalt scrollt. Dies kann vermieden werden, indem beim Aufruf von addEventListener() passiv: true festgelegt wird, was dazu f\u00fchren kann, dass der Browser nicht stornierbare Wheel-Ereignisse generiert.<\/p>\n
Wenn der Benutzer mit dem Mausrad \u00fcber ein Div scrollt, \u00e4ndern Sie dessen Schriftgr\u00f6\u00dfe:<\/p>\n
\r\ndocument.getElementById("myDIV").addEventListener("wheel", myFunction);\r\nfunction myFunction() {\r\n this.style.fontSize = "35px";\r\n}\r\n<\/pre>\nDieses Beispiel zeigt, wie man ein Element mit dem Mausrad (oder einem anderen Zeigeger\u00e4t) skaliert.<\/p>\n
\r\n<script>\r\nfunction zoom(event) {\r\n event.preventDefault();\r\n scale += event.deltaY * -0.01;\r\n \/\/ Restrict scale\r\n scale = Math.min(Math.max(0.125, scale), 4);\r\n\r\n \/\/ Apply scale transform\r\n el.style.transform = `scale(${scale})`;\r\n}\r\nlet scale = 1;\r\nconst el = document.querySelector("div");\r\nel.onwheel = zoom;\r\n<\/script>\r\n<style>\r\nbody {\r\n min-height: 100vh;\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\ndiv {\r\n width: 105px;\r\n height: 105px;\r\n background: #cdf;\r\n padding: 5px;\r\n}\r\n<\/style>\r\n<div>Scale me with your mouse wheel.<\/div>\r\n<\/pre>\nonoffline<\/span><\/h2>\n\u2013 Der Browser l\u00e4uft im Offline-Modus. Das onoffline-Ereignis tritt auf, wenn der Browser offline geht. Das Online-Event ist das Gegenteil des Online-Events.<\/p>\n
Rufen Sie die Funktion auf, wenn der Browser offline geht:<\/p>\n
\r\n<body onoffline="myFunction()">\r\n<\/pre>\nononline<\/span><\/h2>\n\u2013 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.<\/p>\n
Rufen Sie die Funktion auf, wenn der Browser online startet:<\/p>\n
\r\n<body ononline="myFunction()">\r\n<\/pre>\nonpagehide<\/span><\/h2>\n– Der Benutzer navigiert von der Seite weg. Das onpagehide-Ereignis tritt auf, wenn der Benutzer eine Webseite verl\u00e4sst. Es gibt mehrere M\u00f6glichkeiten, von einer Seite weg zu navigieren. Zum Beispiel. Klicken auf einen Link, Aktualisieren der Seite, Absenden eines Formulars, Schlie\u00dfen des Browserfensters usw. Das onpagehide-Ereignis wird manchmal anstelle des onunload-Ereignisses verwendet, da das onunload-Ereignis dazu f\u00fchrt, dass die Seite nicht zwischengespeichert wird. Um herauszufinden, ob eine Seite direkt vom Server geladen oder zwischengespeichert wird, k\u00f6nnen Sie die persisted Eigenschaft des PageTransitionEvent-Objekts verwenden. Diese Eigenschaft gibt \u201etrue\u201c zur\u00fcck, wenn die Seite vom Browser zwischengespeichert wird, andernfalls \u201efalse\u201c.<\/p>\n
Rufen Sie die Funktion auf, wenn der Benutzer die Webseite verl\u00e4sst:<\/p>\n
\r\n<body onpagehide="myFunction()">\r\n<\/pre>\nonpageshow<\/span><\/h2>\n– Der Benutzer navigiert zur Seite. Das onpageshow-Ereignis tritt auf, wenn der Benutzer zu einer Webseite navigiert. Das onpageshow-Ereignis \u00e4hnelt dem onload-Ereignis, au\u00dfer dass es nach dem onload-Ereignis auftritt, wenn die Seite zum ersten Mal geladen wird. Au\u00dferdem 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\u00f6nnen Sie die persisted Eigenschaft des PageTransitionEvent-Objekts verwenden. Diese Eigenschaft gibt true zur\u00fcck, wenn die Seite vom Browser zwischengespeichert wird, andernfalls false<\/p>\n
Rufen Sie die Funktion auf, wenn der Benutzer zur Webseite navigiert:<\/p>\n
\r\n<body onpageshow="myFunction()">\r\n<\/pre>\nonpaste<\/span><\/h2>\n\u2013 Inhalte wurden eingef\u00fcgt. Das onpaste-Ereignis tritt auf, wenn der Benutzer Inhalte in ein Element einf\u00fcgt. Das Onpaste-Ereignis wird am h\u00e4ufigsten f\u00fcr Elemente verwendet input mit type=“text“. Das Clipboard-API-Einf\u00fcgeereignis wird ausgel\u00f6st, wenn der Benutzer \u00fcber die Browser-Benutzeroberfl\u00e4che eine \u201eEinf\u00fcge\u201c-Aktion initiiert. Befindet sich der Cursor in einem bearbeitbaren Kontext (z. B. einem textarea oder einem Element, dessen contenteditable-Attribut auf \u201etrue\u201c gesetzt ist), besteht die Standardaktion darin, den Inhalt der Zwischenablage an der Cursorposition in das Dokument einzuf\u00fcgen. Ein Handler f\u00fcr dieses Ereignis kann auf den Inhalt der Zwischenablage zugreifen, indem er die Methode getData() f\u00fcr die Eigenschaft \u201eclipboardData\u201c des Ereignisses aufruft. Um das Standardverhalten zu \u00fcberschreiben (z. B. um andere Daten einzuf\u00fcgen oder den Inhalt der Zwischenablage zu konvertieren), muss der Ereignishandler die Standardaktion mit event.preventDefault() \u00fcberschreiben und dann die gew\u00fcnschten Daten manuell einf\u00fcgen. Sie k\u00f6nnen ein synthetisches Einf\u00fcgeereignis erstellen und ausl\u00f6sen, dies hat jedoch keine Auswirkungen auf den Inhalt des Dokuments. Dieses Ereignis wird angezeigt, kann abgebrochen werden und ist zusammengestellt. Wird nur f\u00fcr Eingabefelder verwendet.<\/p>\n\n
Rufen Sie eine Funktion auf, wenn Text in ein Element eingef\u00fcgt wird input:<\/p>\n
\r\n<input type="text" onpaste="myFunction()" value="Paste something here">\r\n<\/pre>\nRufen Sie die Funktion auf, wenn Text in das p-Element eingef\u00fcgt wird. (Beachten Sie, dass contenteditable auf \u201etrue\u201c gesetzt ist.):<\/p>\n
\r\n<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.<\/p>\r\n<\/pre>\nBeispiel<\/p>\n
\r\n<script>\r\nconst target = document.querySelector("div.target");\r\ntarget.addEventListener("paste", (event) => {\r\n event.preventDefault();\r\n let paste = (event.clipboardData || window.clipboardData).getData("text");\r\n paste = paste.toUpperCase();\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) return;\r\n selection.deleteFromDocument();\r\n selection.getRangeAt(0).insertNode(document.createTextNode(paste));\r\n selection.collapseToEnd();\r\n});\r\n<script>\r\n<div class="source" contenteditable="true">Copy text from this box.<\/div>\r\n<div class="target" contenteditable="true">And paste it into this one.<\/div>\r\n<\/pre>\nonpause<\/span><\/h2>\n\u2013 Wiedergabe pausieren. Ein Handler f\u00fcr 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.<\/p>\n
Rufen Sie eine Funktion auf, wenn das Video angehalten wurde:<\/p>\n
\r\n<video onpause="myFunction()">\r\n<\/pre>\nonplay<\/span><\/h2>\n\u2013 Starten Sie die Wiedergabe. Handler play f\u00fcr das Wiedergabeereignis, das auftritt, wenn die Wiedergabe einer Audio-\/Videodatei gestartet wurde.<\/p>\n
Rufen Sie die Funktion auf, wenn die Wiedergabe des Videos beginnt:<\/p>\n
\r\n<video onplay="myFunction()">\r\n<\/pre>\nonplaying<\/span><\/h2>\n\u2013 Dateiwiedergabe. Handler playing f\u00fcr 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.<\/p>\n
Rufen Sie eine Funktion auf, wenn das Video startet:<\/p>\n
\r\n<video onplaying="myFunction()">\r\n<\/pre>\nonprogress<\/span><\/h2>\n\u2013 Abrufen von Dateimetadaten. Ein Handler progress f\u00fcr 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\u00e4dt.<\/p>\n
Rufen Sie beim Laden eines Videos eine Funktion auf:<\/p>\n
\r\n<video onprogress="myFunction()">\r\n<\/pre>\nonratechange<\/span><\/h2>\n– \u00c4ndern Sie die Wiedergabegeschwindigkeit. Ein Handler f\u00fcr das Ratechange-Ereignis, das auftritt, wenn sich die Geschwindigkeit der Audio-\/Videowiedergabe \u00e4ndert (z. B. wenn der Benutzer in den langsamen oder schnellen Wiedergabemodus wechselt). Das onratechange-Ereignis tritt auf, wenn sich die Medienwiedergabegeschwindigkeit \u00e4ndert (z. B. wenn der Benutzer in den langsamen oder schnellen Wiedergabemodus wechselt). Dieses Ereignis wird durch die Rate-Wiedergabeeigenschaft des Audio\/Video-Objekts ausgel\u00f6st, die die aktuelle Audio-\/Video-Wiedergabegeschwindigkeit festlegt oder zur\u00fcckgibt.<\/p>\n
Rufen Sie eine Funktion auf, wenn sich die Videowiedergabegeschwindigkeit \u00e4ndert:<\/p>\n
\r\n<video onratechange="myFunction()">\r\n<\/pre>\nonreset<\/span><\/h2>\n\u2013 Datenr\u00fccksetzung abgeschlossen. Handler f\u00fcr das Reset-Ereignis, das auftritt, wenn das Formular gel\u00f6scht wird, wenn auf die Schaltfl\u00e4che \u201eReset\u201c geklickt wird. F\u00fchrt JavaScript-Code aus, wenn das Reset-Ereignis auftritt; das hei\u00dft, wenn der Benutzer die Werte von Formularelementen wiederherstellt (indem er auf die Schaltfl\u00e4che \u201eZur\u00fccksetzen\u201c klickt).<\/p>\n
Rufen Sie eine Funktion auf, wenn das Formular zur\u00fcckgesetzt wird:<\/p>\n
\r\n<form onreset="myFunction()">\r\n Enter name: <input type="text">\r\n <input type="reset">\r\n<\/form>\r\n<\/pre>\n