Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine Einführung in Ereignisse in JS

小云云
Freigeben: 2018-02-27 14:21:34
Original
1238 Leute haben es durchsucht

1 Ereignis

Ereignis kann als interaktives Verhalten zwischen dem Benutzer und dem Browser verstanden werden

2 Ereignisfunktionsbindung
Ereignisfunktion: Wenn ein Ereignis auftritt, ist der spezifische Reaktionsplan, der zur Behandlung des Ereignisses verwendet wird, die Ereignisverarbeitungsfunktion
Es werden einige Codeblöcke angezeigt
Zum Beispiel: Welche Aktion wird ausgeführt, wenn die Maus klickt (Ereignis)? Dies erfolgt durch den Event-Handler
Wenn die Tastatur gedrückt wird (drücken Sie die Eingabetaste) - Was tun?

Zusammenfassung: Beachten Sie, dass das Auftreten von Ereignissen und die Funktion zur Ereignisverarbeitung unterschiedliche Konzepte sind.
Nach dem Eintreten des Ereignisses kann es eine Ereignisverarbeitungsfunktion geben, die die entsprechende Aktion ausführt, oder es kann keine vorhanden sein.
Wenn vorhanden ist keine Ereignisverarbeitungsfunktion, hat keinen Einfluss auf das Auftreten von Ereignissen, was passieren soll, wird trotzdem passieren
Was zu tun ist, wird von der Ereignisverarbeitungsfunktion entschieden

3 So lernen Sie Ereignisse
1 Einige häufige Ereignisse werden in js angegeben, z. B. Mausklick, Mausdrücken, Mausheben, Mausbewegung
,Maus rein und raus...
Es sind zwei Teile des Ereignisses zu beherrschen: 1) Ereignisname (onclickonmouseover) 2) Entsprechende Auslöseszene
Der Name des Ereignisses und die auslösende Szene muss man sich merken (mehr Übungen machen und handschriftlich abschreiben)

2 事件处理函数(功能)
  需要根据具体业务场景来实现
Nach dem Login kopieren

4 Maus-Ereignisse
Mausbezogene Ereignisse

事件名称        事件的触发场景

onmousedown     当鼠标按下的时候触发
onmouseup       当鼠标抬起的时候触发
onmouseover     当鼠标移入的时候触发
onmouseout      当鼠标移出的时候触发
onclick         当鼠标点击的时候触发
ondblclick      当鼠标双击的时候触发
onmousemove     当鼠标移动的时候触发
oncontextmenu   当鼠标右键的时候触发(可以自定义右键菜单)
Nach dem Login kopieren

5 Tastaturereignisse
Tastaturbezogene Ereignisse Tastatur (Taste) gedrückt Tastatur angehoben
onkeydown Wird ausgelöst, wenn die Tastatur gedrückt wird
onkeyup löst

6 Formularereignisse
aus, wenn die Tastatur angehoben wird Formularbezogene Ereignisse Formularübermittlung Fokus erhalten Fokus verlieren

onsubmit     当表单提交的时候触发
onchange     当修改表单字段的时候触发(内容改变就会触发)
onfocus      当获取到焦点的时候触发
onblur        当失去焦点的时候触发
Nach dem Login kopieren

7 Fensterereignisse
Fensterbezogene Ereignisse Fensterladen Fensterwechsel

onload      当对象加载完成以后触发
onresize    当窗口改变的时候触发
Nach dem Login kopieren

8 Ereignisobjektereignis
Das Ereignisobjekt ist ein Objekt, das zum Aufzeichnen relevanter Informationen über das Ereignis verwendet wird, wenn ein Ereignis auftritt
Unter dem Ereignisobjekt versteht man: die Blackbox des Flugzeugs und den Fahrrekorder des Autos

Wichtiger Punkt: Denken Sie an die Kompatibilitätslösung var ev = ev || keyCode Tastaturcode Geben Sie 13 Leertaste 32 Steuerrichtung
ein clientX, clientY Die Koordinaten der Maus im sichtbaren Bereich des Browsers
offsetLeft, offsetTop

9 Ereignis sprudelt

Ereignisblasenmechanismus – Phänomen
Die Auswirkungen des Ereignissprudelns
Verhindern Sie, dass Ereignisse sprudeln
Anwendung von Event Bubbling

创建元素、添加子元素
事件源
事件委托
Nach dem Login kopieren
Verwandte Empfehlungen:

Detaillierte Erläuterung der Ereignisschleife in JS und Node.js

node . Detaillierte Erläuterung des Ereignisverarbeitungsmechanismus in js

Beispielanalyse des Ereigniserfassungsmodells und des Bubbling-Modells in js_javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonEine Einführung in Ereignisse in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage