Welche Ereignistypen gibt es in JavaScript?
Zu den Javascript-Ereignistypen gehören: UI-Ereignisse, Fokusereignisse, Maus- und Radereignisse, Tastatur- und Textereignisse, zusammengesetzte Ereignisse, Änderungsereignisse, HTML5-Ereignisse, Geräteereignisse, Berührungs- und Gestenereignisse usw.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
JavaScript-Ereignistypen
Es gibt viele Arten von Ereignissen, die in Webbrowsern auftreten können. Hier werde ich mich hauptsächlich auf die folgenden häufig verwendeten Ereignistypen konzentrieren:
- UI-Ereignisse
- Fokusereignisse
- Maus- und Radereignisse
- Tastatur- und Textereignisse
- Zusammengesetzte Ereignisse
- Änderungsereignisse
- HTML5-Ereignisse
- Geräteereignisse
- Berührungs- und Gestenereignisse
Teil 1: UI-Ereignisse
Das UI im UI-Ereignis ist (Benutzeroberfläche, Benutzeroberfläche), das ausgelöst wird, wenn der Benutzer mit den Elementen der Seitensauna interagiert.
UI-Ereignisse umfassen hauptsächlich Lade-, Entlade-, Abbruch-, Fehler-, Auswahl-, Größenänderungs- und Bildlaufereignisse.
1.Ladeereignis
Dieses Ereignis tritt auf, wenn die Seite vollständig geladen ist (einschließlich aller Bilder, JS-Dateien, CSS-Dateien und anderer externer Ressourcen). Das Ladeereignis im Fenster wird ausgelöst.
Dieses Ereignis ist das am häufigsten verwendete Ereignis in JavaScript. Beispielsweise verwenden wir häufig window.onload=function(){};, um die Funktion auszuführen, nachdem die Seite vollständig geladen ist.
Außerdem wusste ich vorher nie, dass dieses Ereignis auch auf andere Elemente angewendet werden kann, beispielsweise auf Bildelemente, wie unten gezeigt:
<img src="smile.png" onload="alert('loaded')">
Es wird ein Popup-Fenster angezeigt, wenn das Bild vollständig geladen ist. Natürlich kann es auch mit JS implementiert werden, wie unten gezeigt:
var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});2. Unload-Ereignis
Dieses Ereignis ist offensichtlich das Gegenteil des Ladeereignisses. Wird ausgelöst, nachdem das Dokument vollständig entladen wurde. Die Entladezeit wird ausgelöst, wenn der Benutzer von einer Seite zur anderen wechselt. Der häufigste Anwendungsfall für dieses Ereignis sind klare Referenzen, um Speicherlecks zu vermeiden.
Dieses Ereignis kann auch auf zwei Arten angegeben werden. Eine davon ist die JavaScript-Methode, die EventUtil.addHandler() verwendet. Die andere besteht darin, dem Body-Element eine Funktion hinzuzufügen.
Es ist zu beachten, dass Sie beim Schreiben des Codes im Onload-Ereignis vorsichtig sein müssen, da dieser nach dem Entladen der Seite ausgelöst wird, sodass die Objekte, die nach dem Laden der Seite vorhanden sind, nicht unbedingt danach vorhanden sind Der Onload wird ausgelöst. 3. Größenänderungsereignis Dieses Ereignis wird im Fenster ausgelöst.
Der Handler kann also auch über JS oder das onresize-Attribut im Body-Element angegeben werden.
<body onload="alert('changed')">
Event sprudelt nicht
und wird von allen Browsern unterstützt.focusin wird ausgelöst, wenn ein Element den Fokus erhält. Dieses Bubble-Ereignis wird von
einigen Browsern nicht unterstützt.focusout wird ausgelöst, wenn ein Element den Fokus verliert. Dieses Event-Bubbling
wird von einigen Browsern nicht unterstützt.Hinweis: Auch wenn Unschärfe und Fokus nicht sprudeln, sind sie während der Aufnahmephase dennoch zu hören.
- Teil 3: Maus- und Radereignisse
- Mausereignisse sind die am häufigsten verwendeten Ereignisse in der Webentwicklung, da die Maus das wichtigste Positionierungsgerät ist.
- click---用户单击鼠标左键或按下回车键触发
- dbclick---用户双击鼠标左键触发。
- mousedown---在用户按下了任意鼠标按钮时触发。
- mouseenter---在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。
- mouseleave---元素上方的光标移动到元素范围之外时触发。不冒泡。
- mousemove---光标在元素的内部不断的移动时触发。
- mouseover---鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发。
- mouseout---用户将光标从一个元素上方移动到另一个元素时触发。
- mouseup---在用户释放鼠标按钮时触发。
注意到：上述所有事件除了mouseenter和mouseleave外都冒泡。
重要：只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件。同样，只有在同一个元素上触发两次click事件，才会触发dbclick事件。
dbclick事件的产生过程如下：
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
上面介绍了有关鼠标的事件，下面介绍一些对于鼠标光标的位置：客户区坐标位置、页面坐标位置、屏幕坐标位置
一、客户区坐标位置
通过客户区坐标可以知道鼠标是在视口中什么位置发生的。
clientX和clientY分别表示鼠标点击的位置。以body的左上角为原点，向右为X的正方向，向下为Y的正方向。这两个都是event的属性。举例如下：
<button id="clickMe">点我</button> <script> var button=document.getElementById("clickMe"); button.onclick=function(event){ alert(event.clientY+""+event.clientX); }; </script>Nach dem Login kopieren当我点击按钮的左上角时，显示为00。效果如下：
二.页面坐标位置
和客户区坐标位置不同，页面坐标位置表示鼠标光标在页面而非视口中的位置。因此坐标是从页面本身而非视口的左边和顶边计算的。如果前面的话不能很好的理解，接着看这里：在页面没有滚动的情况下，页面坐标位置和客户区坐标位置是相同的。
页面坐标
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面坐标位置</title> <style> *{ margin:0; padding:0; } div{ width: 800px; height: 1200px; /*我的电脑的视口高度为960px；*/ background: #ccc; } </style> </head> <body> <div></div> <button id="button"> 点击我</button> <script> var button=document.getElementById("button"); button.onclick=function(){ alert("pageX为"+event.pageX+"pageY为"+event.pageY); }; </script> </body> </html>Nach dem Login kopieren在上面的例子中，我把div的高设置为了1200px；而我的浏览器视口高度为960px；所以一定需要滚动我们才能点击按钮，最终得到的结果是：pageX为13pageY为1210。
然而IE8及更早的浏览器是不支持事件对象上的页面坐标的，即不能通过pageX和pageY来获得页面坐标，这时需要使用客户区坐标和滚动信息来计算了。而滚动信息需要使用document.body(混杂模式)、document.documentElement(标准模式)中的scrollLeft和scrollTop属性。举例如下：
<button id="button"> 点击我</button> <script> var button=document.getElementById("button"); button.onclick=function(){ var pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft); var pageY=event.clientY+(document.body.scrollRight||document.documentElement.scrollRight); alert("pageX为"+pageX+"pageY为"+pageY); }; </script>Nach dem Login kopieren此例子在IE浏览器下可得到同样结果。
三.屏幕坐标位置
与前两者又有所不同，鼠标事件发生时，还有一个光标相对于整个电脑屏幕的位置。通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的位置。举例如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面坐标位置</title> <style> *{ margin:0; padding:0; } </style> </head> <body> <button id="button"> 点击我</button> <script> var button=document.getElementById("button"); button.onclick=function(){ alert("X为："+event.screenX+"Y为："+event.screenY); }; </script> </body> </html>Nach dem Login kopieren最终的结果如下：
显然screenX和screenY是相对于屏幕的左方和上方的。
四.修改键
当点击某个元素时，如果我们同时按下了ctrl键，那么事件对象的ctrlKey属性值将为true，否则为false，对于alt、shift、meta（windows键盘的windows键、苹果机的Cmd键）的事件属性altKey、shiftKey、metaKey同样如此。下面举例如下：
<button id="button"> 点击我</button> <script> var button=document.getElementById("button"); button.onclick=function(){ var array=new Array(); if(event.shiftKey){ array.push("shift"); } if(event.ctrlKey){ array.push("ctrl"); } if(event.altKey){ array.push("alt"); } if(event.metaKey){ array.push("meta"); } alert(array.join(",")); }; </script>Nach dem Login kopieren这个例子中，我首先创建了一个array数组，接着如果我按下了那几个键，就会存入相应的名称。这里我同时按下了四个键，结果如下：
即最终将数组中的四个值拼接成了字符串显示出来。
五、相关元素
<button id="button"> 点击我</button> <script> var button=document.getElementById("button"); button.onmouseup=function(){ alert(event.button); }; </script>Nach dem Login kopieren当我是用左键产生mousedown事件时，弹出窗口为0，中间键为1，右键为2。
六、鼠标滚轮事件
<script> document.onmousewheel=function(){ alert(event.wheelDelta); }; </script>Nach dem Login kopieren当我向下滚动滚轮时，效果如下：
第四部分：键盘和文本事件
该部分主要有下面几种事件：
keydown：当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress:当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup:当用户释放键盘上的键时触发。
textInput:这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。
这几个事件在用户通过文本框输入文本时才最常用到。
键盘事件：
document.addEventListener("keydown",handleKeyDownClick,false); function handleKeyDownClick(event) { var e = event||window.event||arguments.callee.caller.arguments[0]; if (e&&e.keyCode == 13) { alert("keydown"); } }Nach dem Login kopieren【推荐学习：javascript高级教程】
Das obige ist der detaillierte Inhalt vonWelche Ereignistypen gibt es in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
So verwenden Sie insertBefore in Javascript
Nov 24, 2023 am 11:56 AM
Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
