Die neueste Zusammenfassung häufiger JavaScript-DOM-Ereignisse!

Dieser Artikel fasst die allgemeinen Ereignisse von JS DOM zusammen und hat einen gewissen Referenzwert. Interessierte Freunde können sich darauf beziehen.

1 Zusammenfassung häufiger Ereignisse

1.1 Mausereignisse

click			单击
dblclick		双击
contextmenu		右击
mouseover		鼠标悬停在元素上， 建议用 mouseenter 代替
mouseout		鼠标离开元素，建议用 mouseleave 代替
mouseenter		鼠标悬停在元素上
mouseleave		鼠标离开元素
mousedown		鼠标按键按下
mouseup		    鼠标按键抬起
mousemove		鼠标移动

1.2 Tastaturereignisse

keydown		键盘按键按下
keyup		键盘按键抬起
keypress	键盘按键按下，用于可输入字符按键

1. Welche Elemente können auf Tastaturereignisse warten?

① Dokument

② Elemente, die den Fokus erhalten können (Formularsteuerelemente, insbesondere Eingabeelemente)

2 Was ist der Unterschied zwischen Tastendruck und Tastendruck?

① Tastendruck kann durch alle Tastendrücke ausgelöst werden und Groß- und Kleinbuchstaben können nicht unterschieden werden.

② Tastendruck kann nur durch Drücken der Taste ausgelöst werden, die Zeichen eingeben kann und zwischen Groß- und Kleinbuchstaben unterscheiden kann.

3. Wie finde ich heraus, welche Taste gedrückt ist?

Verwenden Sie die Attribute im Ereignisobjekt:

• evnet.keyCode, um den ASCII-Wert zu erhalten, der dem Schlüssel

• event. entspricht, der mit keyCode

• event.key identisch ist, um das Zeichen zu erhalten Wert des Schlüssels.

1.3 Der Unterschied zwischen dem Dokumentereignis

load				页面中所有的一切加载完毕就会触发，可以监听到window上或者body元素
DOMContentLoaded	页面中所有的元素加载完毕就会触发，可以监听在window或者document上， 只能使用 						addEventListener 监听事件
beforeunload		当关闭网页的时候触发

load-Ereignis und dem DOMContentLoaded-Ereignis:

① Das Ladeereignis kann erst ausgelöst werden, nachdem alles auf der Seite geladen wurde, einschließlich Elemente und externe Ressourcen.

② Das DOMContentLoaded-Ereignis kann ausgelöst werden, wenn alle Elemente auf der Seite geladen werden, mit Ausnahme externer Ressourcen.

1.4 Formularereignis

submit		当表单提交的时候触发，该事件监听到form元素	
reset		当表单重置的时候触发，该事件监听到form元素
focus		当表单控件获取焦点的时候触发
blur		当表控件单失去焦点的时候触发
select		输入框或文本域中的内容被选中
change		对于输入框，内容改变且失去焦点才会触发；适合用于select

1.5 Bildereignis

load		图片文件下载完毕
error		图片加载失败

1.6 Andere Ereignisse

resize		监听到 window上，视口大小发生改变
scroll		监听到window或者是具有滚动体的元素，页面或元素中的内容发生滚动就触发。

2 Ereignisobjekt

2.1 Ereignisobjekt abrufen

Setzen Sie den ersten formalen Parameter auf die Ereignisrückruffunktion, um das Ereignisobjekt abzurufen.

Verschiedene Arten von Ereignissen erhalten unterschiedliche Arten von Ereignisobjekten. 2.2 Eigenschaften und Methoden des Maus-Ereignisobjekts MouseEvent event.stopPropagation() in der Rückruffunktion, um Blasenbildung zu verhindern.

2.6 Standardverhalten von Browsern

① Was ist das Standardverhalten von Browsern

offsetX / offsetY		获取鼠标在目标元素上的坐标位置
clientX / clientY		获取鼠标在视口上的坐标位置
pageX / pageY			获取鼠标在页面上的坐标位置
screenX / screenY       获取鼠标在屏幕上的坐标位置
button					获取按的是哪个鼠标按键， 0：左键； 1:中间键; 2:右键

② Verhindern Sie das Standardverhalten des Browsers

Rufen Sie event in der Rückruffunktion des Ereignisses auf. präventDefault() kann das Standardverhalten verhindern.

Hinweis:

Wenn Sie die zweite Möglichkeit zum Abhören von Ereignissen verwenden, kann return false in der Rückruffunktion auch das Standardverhalten verhindern.

event.stopPropagation()，就可以阻止冒泡。

2.6 浏览器的默认行为

① 浏览器有哪些默认行为

keyCode		获取按键对应的编码值
which		同 keyCode
key			获取按键对应的字符值

② 阻止浏览器默认行为

在事件的回调函数中调用 event.preventDefault() 即可阻止默认行为。

注意： 如果使用第二种方式监听事件，在回调函数中 return false

3 Ereignisdelegierter

Das Ereignis wird auf dem Vorfahrenelement überwacht, bestimmt das Zielelement und führt zugehörige Vorgänge aus, wenn das Zielelement die Bedingungen erfüllt.

Vorteile der Ereignisdelegierung:

Für die Überwachung desselben Ereignisses auf einer großen Anzahl von Elementen ist die Verwendung der Ereignisdelegation effizienter als das Durchlaufen und Abhören eines nach dem anderen.
Durch die Ereignisdelegation können neue Elemente auch auf Ereignisse reagieren.
Verwandte Empfehlungen: [

JavaScript-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonDie neueste Zusammenfassung häufiger JavaScript-DOM-Ereignisse!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!