Detaillierte Erläuterung von UI-Ereignissen in JavaScript-Ereignistypen_Javascript-Kenntnisse

„DOM-Level-3-Ereignisse“ legt mehrere Arten von Ereignissen fest

UI-Ereignisse, aufgeteilt, wenn der Benutzer mit Elementen auf der Seite interagiert; Fokusereignis, Element gewinnt oder verliert Fokus; Mausereignisse: Führen Sie Operationen auf der Seite mit der Maus aus Scrollrad-Ereignis, mit dem Mausrad oder einem ähnlichen Gerät; Textereignis, wenn der Benutzer Text in das Dokument eingibt; Tastaturereignisse: Führen Sie Operationen auf der Seite über die Tastatur aus Synthetisches Ereignis, Division bei der Eingabe von Zeichen für IME (Input Method Editor); Änderungsereignis (Mutation), die zugrunde liegende DOM-Struktur ändert sich
Namensänderungsereignis: Wenn sich der Element- oder Attributname ändert, ist dieser Ereignistyp veraltet.
Im Folgenden liegt der Schwerpunkt auf dem Inhalt von UI-Ereignissen

UI-Ereignisse beziehen sich auf Ereignisse, die nicht unbedingt mit Benutzervorgängen zusammenhängen.

Ereignis laden

DOMActivate，元素已经被用户操作（鼠标或键盘）激活。已经被废弃。
load，页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。
unload，页面完全卸载（window），所有框架都卸载后（框架集），嵌入内容卸载完毕后（object）。
abort，当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。
error，当js错误时（window），当无法加载图像时（img），当无法加载嵌入内容时（object），当一或多个框架无法加载（框架集）。
select，当用户选择文本框（texterea或input）中的一个或多个字符时触发。
resize：当窗口或框架的大小变化时（window或框架）
scroll：当用户滚动带滚动条的元素中的内容时（在该元素上触发）

Eines der am häufigsten verwendeten Ereignisse in js ist das Laden. Wenn die Seite vollständig geladen ist (alle Bilder, js-Dateien, CSS-Dateien usw.), wird das Ladeereignis im Fenster ausgelöst. Zum Beispiel:

Im Allgemeinen können alle Ereignisse, die im Fenster auftreten, über die entsprechenden Merkmale im Body-Element angegeben werden, da auf das Fensterelement in HTML nicht zugegriffen werden kann. Dies ist lediglich eine Notlösung, um die Abwärtskompatibilität sicherzustellen. Zum Beispiel:

window.onload = function () {
  console.log('loaded');
}

Kann auch auf Bildelementen verwendet werden:

document.body.onload = function () {
  console.log('loaded');
}

Ein weiteres Beispiel ist der folgende Code. Nachdem das Fenster geladen wurde, wird ein img-Element zum Text hinzugefügt. Nach dem Laden des img-Elements werden der Quellcode des Bildes und eine Eingabeaufforderung angezeigt:

var img = document.getElementById("img");
img.onload = function () {
  console.log(event.target.src);
}

Darüber hinaus unterstützt das Skriptelement auch das Ladeereignis auf nicht standardmäßige Weise.

Einige Browser unterstützen auch das Ladeereignis für das Link-Element, sodass Entwickler feststellen können, ob das Stylesheet geladen wurde.

window.onload = function () {
  var image = document.createElement("img");
  document.body.appendChild(image);
  image.src = "scr.png"
  image.onload = function () {
    console.log(event.target.src);
    console.log('img is loaded');
  };
}

Ereignis entladen

Dieses Ereignis wird ausgelöst, nachdem das Dokument vollständig entladen wurde. Das Entladeereignis tritt immer dann auf, wenn der Benutzer von einer Seite zur anderen wechselt.

Beim Schreiben von Code im Onunload-Ereignishandler ist Vorsicht geboten, da Objekte, die nach dem Laden der Seite vorhanden sind, zu diesem Zeitpunkt möglicherweise nicht vorhanden sind.

Ereignisgröße ändern

window.onunload = function () {
  alert("8888");
}

Dieses Ereignis wird ausgelöst, wenn die Größe des Browserfensters auf eine neue Höhe oder Breite geändert wird.

Da einige Browser dieses Ereignis auslösen, wenn sich das Fenster um 1 Pixel ändert, und es weiterhin auslöst, wenn sich das Fenster ändert, werden andere Browser nur dann ausgelöst, wenn der Benutzer die Größenänderung des Fensters stoppt. Daher sollten Sie vermeiden, dem Handler dieses Ereignisses viel Berechnungscode hinzuzufügen, um zu verhindern, dass der Browser seine Reaktion verlangsamt.

Scroll-Event

window.onresize = function () {
  console.log(document.body.clientWidth);
}

Obwohl dieses Ereignis für das Fensterobjekt auftritt, stellt es tatsächlich Änderungen in den Antwortelementen auf der Seite dar. Im gemischten Modus werden Änderungen über scrollLeft und scrollTop des Body-Elements überwacht. Im nicht standardmäßigen Modus spiegeln alle Browser außer Safari diese Änderung über das HTML-Element (documentElement) wider:

Da der Browser ständig bei Änderungen ausgelöst wird, sollten Sie vermeiden, dem Handler dieses Ereignisses viel Berechnungscode hinzuzufügen, um eine Verlangsamung der Browserreaktion zu vermeiden.

Ereignis abbrechen

Bitte achten Sie auf nachfolgende Updates zu Abbruch, Fehler, Auswahl und anderen Ereignissen

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

Fehlerereignis

Bitte achten Sie auf nachfolgende Updates zu Abbruch, Fehler, Auswahl und anderen Ereignissen

Ereignis auswählen

Bitte achten Sie auf nachfolgende Updates zu Abbruch, Fehler, Auswahl und anderen Ereignissen