Was sind die DOM-Ereignisse von JavaScript?

Zu den

js-Dom-Ereignissen gehören: Abbruch, Nachdruck, Unschärfe, Abspielen, Ändern, Klicken, Kopieren, Ausschneiden, Doppelklick, Ziehen, Ablegen, Beendet, Fehler, Fokus, Öffnen, Laden, Abspielen usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

HTML-DOM-Ereignisse

HTML-DOM-Ereignisse ermöglichen es JavaScript, verschiedene Ereignishandler für Elemente in einem HTML-Dokument zu registrieren.

Ereignisse werden häufig in Verbindung mit Funktionen verwendet, die erst ausgeführt werden, wenn das Ereignis eintritt (z. B. wenn der Benutzer auf eine Schaltfläche klickt).

Ereignis	Beschreibung
abort	Dieses Ereignis tritt auf, wenn das Laden des Mediums abgebrochen wird.
afterprint	Dieses Ereignis tritt auf, wenn die Seite mit dem Drucken beginnt oder wenn das Druckdialogfeld geschlossen wird.
animationend	CSS Dieses Ereignis tritt auf, wenn die Animation abgeschlossen ist.
animationiteration	Tritt auf, wenn eine CSS-Animation wiederholt wird.
animationstart	Dieses Ereignis tritt ein, wenn eine CSS-Animation startet.
beforeprint	Dieses Ereignis tritt ein, wenn die Seite gedruckt werden soll.
beforeunload	Dieses Ereignis tritt unmittelbar vor dem Entladen des Dokuments auf.
Unschärfe	Dieses Ereignis tritt auf, wenn ein Element den Fokus verliert.
canplay	Dieses Ereignis tritt ein, wenn der Browser mit der Medienwiedergabe beginnen kann.
canplaythrough	Dieses Ereignis tritt auf, wenn der Browser die Medien abspielen kann, ohne die Pufferung zu stoppen.
Ändern	Dieses Ereignis tritt auf, wenn sich der Inhalt, der ausgewählte Inhalt oder der ausgewählte Status des Formularelements ändert.
Klicken	Dieses Ereignis tritt auf, wenn der Benutzer auf das Element klickt.
Kontextmenü	Dieses Ereignis tritt auf, wenn der Benutzer mit der rechten Maustaste auf ein Element klickt, um das Kontextmenü zu öffnen.
kopieren	Dieses Ereignis tritt auf, wenn der Benutzer den Inhalt eines Elements kopiert.
cut	Dieses Ereignis tritt ein, wenn der Benutzer den Inhalt eines Elements ausschneidet.
dblclick	Dieses Ereignis tritt auf, wenn der Benutzer auf ein Element doppelklickt.
Drag	Dieses Ereignis tritt auf, wenn ein Element gezogen wird.
dragend	Dieses Ereignis tritt auf, wenn der Benutzer das Ziehen des Elements abgeschlossen hat.
dragenter	Dieses Ereignis tritt ein, wenn das gezogene Element in das Ablageziel gelangt.
dragleave	Dieses Ereignis tritt auf, wenn das gezogene Element das Ablageziel verlässt.
Dragover	Dieses Ereignis tritt auf, wenn sich das gezogene Element über dem Ablageziel befindet.
dragstart	Dieses Ereignis tritt ein, wenn der Benutzer mit dem Ziehen eines Elements beginnt.
drop	Dieses Ereignis tritt auf, wenn ein gezogenes Element auf dem Drop-Ziel abgelegt wird.
Daueränderung	Dieses Ereignis tritt auf, wenn sich die Mediendauer ändert.
beendet	Dieses Ereignis tritt ein, wenn die Medien das Ende erreichen.
Fehler	Dieses Ereignis tritt auf, wenn beim Laden einer externen Datei ein Fehler auftritt.
Fokus	Dieses Ereignis tritt auf, wenn ein Element den Fokus erhält.
focusin	Dieses Ereignis tritt auf, wenn ein Element im Begriff ist, den Fokus zu gewinnen.
focusout	Dieses Ereignis tritt auf, wenn ein Element kurz davor steht, den Fokus zu verlieren.
Vollbildwechsel	Dieses Ereignis tritt auf, wenn das Element im Vollbildmodus angezeigt wird.
Vollbildfehler	Dieses Ereignis tritt auf, wenn ein Element nicht im Vollbildmodus angezeigt werden kann.
hashchange	Dieses Ereignis tritt auf, wenn sich der Ankerteil der URL ändert.
Eingabe	Dieses Ereignis tritt auf, wenn ein Element Benutzereingaben erhält.
invalid	Dieses Ereignis tritt auf, wenn das Element ungültig ist.
keydown	Dieses Ereignis tritt auf, wenn der Benutzer eine Taste drückt.
Tastendruck	Dieses Ereignis tritt auf, wenn der Benutzer eine Taste drückt.
keyup	Dieses Ereignis tritt auf, wenn der Benutzer die Taste loslässt.
load	Dieses Ereignis tritt auf, wenn das Objekt geladen wurde.
loadeddata	Dieses Ereignis tritt auf, nachdem die Mediendaten geladen wurden.
loadedmetadata	Dieses Ereignis tritt auf, wenn Metadaten (wie Größe und Dauer) geladen werden.
loadstart	Dieses Ereignis tritt auf, wenn der Browser mit der Suche nach dem angegebenen Medium beginnt.
Nachricht	Dieses Ereignis tritt ein, wenn eine Nachricht über diese Ereignisquelle empfangen wird.
mousedown	Dieses Ereignis tritt auf, wenn der Benutzer die Maustaste auf ein Element drückt.
mouseenter	Dieses Ereignis tritt auf, wenn sich der Zeiger über das Element bewegt.
mouseleave	Dieses Ereignis tritt auf, wenn sich der Zeiger aus dem Element bewegt.
mousemove	Dieses Ereignis tritt auf, wenn sich der Zeiger über das Element bewegt.
mouseout	Dieses Ereignis tritt auf, wenn der Benutzer den Mauszeiger aus einem Element oder einem darin enthaltenen untergeordneten Element heraus bewegt.
Mouseover	Dieses Ereignis tritt ein, wenn der Zeiger über ein Element oder ein darin enthaltenes untergeordnetes Element bewegt wird.
mouseup	Dieses Ereignis tritt auf, wenn der Benutzer die Maustaste auf dem Element loslässt.
offline	Dieses Ereignis tritt auf, wenn der Browser offline zu arbeiten beginnt.
online	Dieses Ereignis tritt auf, wenn der Browser online zu arbeiten beginnt.
open	Dieses Ereignis tritt auf, wenn eine Verbindung zur Ereignisquelle geöffnet wird.
pagehide	Dieses Ereignis tritt auf, wenn der Benutzer eine Seite verlässt, um zu navigieren.
pageshow	Dieses Ereignis tritt auf, wenn der Benutzer zu einer Webseite navigiert.
Einfügen	Dieses Ereignis tritt auf, wenn der Benutzer Inhalte in ein Element einfügt.
Pause	Dieses Ereignis tritt auf, wenn das Medium vom Benutzer oder programmgesteuert angehalten wird.
play	Dieses Ereignis tritt auf, wenn das Medium gestartet wurde oder nicht mehr pausiert ist.
Wiedergabe	Dieses Ereignis tritt auf, wenn die Wiedergabe des Mediums nach dem Puffern angehalten oder gestoppt wird.
popstate	Dieses Ereignis tritt auf, wenn sich der Verlauf des Fensters ändert.
progress	Dieses Ereignis tritt auf, wenn der Browser gerade Mediendaten abruft.
Ratechange	Dieses Ereignis tritt auf, wenn sich die Medienwiedergabegeschwindigkeit ändert.
reset	Dieses Ereignis tritt auf, wenn das Formular zurückgesetzt wird.
Größe ändern	Dieses Ereignis tritt auf, wenn die Größe der Dokumentansicht geändert wird.
scroll	Dieses Ereignis tritt auf, wenn die Bildlaufleiste des Bildlaufelements gescrollt wird.
Suche	Dieses Ereignis tritt auf, wenn der Benutzer etwas in das Suchfeld eingibt.
seeked	Dieses Ereignis tritt auf, wenn der Benutzer die Bewegung/den Sprung zu einer neuen Position in den Medien beendet hat.
seeking	Dieses Ereignis tritt auf, wenn der Benutzer beginnt, sich an eine neue Stelle in den Medien zu bewegen/zu springen.
select	Dieses Ereignis tritt ein, nachdem der Benutzer Text ausgewählt hat (für und ). </td> </tr> <tr> <td>show</td> <td>Dieses Ereignis tritt auf, wenn das <menu>-Element als Kontextmenü angezeigt wird . </td> </tr> <tr> <td>stalled</td> <td> Dieses Ereignis tritt auf, wenn der Browser versucht, Mediendaten abzurufen, die Daten jedoch nicht verfügbar sind. </td> </tr> <tr> <td>Speicher</td> <td>Dieses Ereignis tritt auf, wenn der Webspeicherbereich aktualisiert wird. </td> </tr> <tr> <td>submit</td> <td>Dieses Ereignis tritt auf, wenn ein Formular gesendet wird. </td> </tr> <tr> <td>suspend</td> <td>Dieses Ereignis tritt auf, wenn der Browser absichtlich keine Mediendaten abruft. </td> </tr> <tr> <td>timeupdate</td> <td>Dieses Ereignis tritt auf, wenn sich die Wiedergabeposition ändert. </td> </tr> <tr> <td>toggle</td> <td>Dieses Ereignis tritt ein, wenn der Benutzer das Element <details> öffnet oder schließt. </td> </tr> <tr> <td>touchcancel</td> <td>Dieses Ereignis tritt auf, wenn die Berührung unterbrochen wird. </td> </tr> <tr> <td>touchend</td> <td>Dieses Ereignis tritt auf, wenn der Finger vom Touchscreen entfernt wird. </td> </tr> <tr> <td>touchmove</td> <td>Dieses Ereignis tritt auf, wenn der Finger über den Bildschirm gezogen wird. </td> </tr> <tr> <td>touchstart</td> <td>Dieses Ereignis tritt auf, wenn ein Finger auf den Touchscreen gelegt wird. </td> </tr> <tr> <td>transitionend</td> <td>Dieses Ereignis tritt auf, wenn der CSS-Übergang abgeschlossen ist. </td> </tr> <tr> <td>unload</td> <td>Dieses Ereignis tritt auf, nachdem die Seite entladen wurde (für <body>). </td> </tr> <tr> <td>Lautstärkeänderung</td> <td>Dieses Ereignis tritt auf, wenn die Lautstärke des Mediums geändert wurde. </td> </tr> <tr> <td>Warten</td> <td>Dieses Ereignis tritt auf, wenn die Medien angehalten wurden, aber voraussichtlich fortgesetzt werden. </td> </tr> <tr> <td>Rad</td> <td>Dieses Ereignis tritt auf, wenn das Mausrad auf einem Element nach oben oder unten scrollt. </td> </tr> </tbody></table> <p>【Empfohlenes Lernen: <a href="https://www.php.cn/course/list/2.html" target="_blank">Javascript-Tutorial für Fortgeschrittene</a>】</p><p>Das obige ist der detaillierte Inhalt vonWas sind die DOM-Ereignisse von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Ist Javascript eine stark typisierte Sprache?" href="https://m.php.cn/de/faq/484551.html">Ist Javascript eine stark typisierte Sprache?</a></span><span>Nächster Artikel：<a class="dBlack" title="Ist Javascript eine stark typisierte Sprache?" href="https://m.php.cn/de/faq/484581.html">Ist Javascript eine stark typisierte Sprache?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/484462.html" title="So konvertieren Sie eine Javascript-Zeichenfolge in einen booleschen Wert" class="aBlack">So konvertieren Sie eine Javascript-Zeichenfolge in einen booleschen Wert</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/484463.html" title="So implementieren Sie die Kopier- und Einfügefunktion in JavaScript" class="aBlack">So implementieren Sie die Kopier- und Einfügefunktion in JavaScript</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/484537.html" title="So konvertieren Sie eine Gleitkommazahl in Javascript in eine Ganzzahl" class="aBlack">So konvertieren Sie eine Gleitkommazahl in Javascript in eine Ganzzahl</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/484542.html" title="Was sind die Ursachen für Javascript-Speicherlecks?" class="aBlack">Was sind die Ursachen für Javascript-Speicherlecks?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/484543.html" title="Was ist der Referenzdatentyp von Javascript?" class="aBlack">Was ist der Referenzdatentyp von Javascript?</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>