-Element. Die Konsole gibt btn, div3, div2, aus. div1, dies ist die Auslösesequenz des Onclick-Ereignisses.
Die Reihenfolge, in der Ereignisse ausgelöst werden Wenn wir im Onclick-Ereignis mehrere Ereignisse im Zusammenhang mit Maustasten binden, in welcher Reihenfolge werden diese Ereignisse ausgelöst?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
document.getElementById('btn').onclick = function () {
console.log('click');
}
document.getElementById('btn').ondblclick = function () {
console.log('dblclick');
}
document.getElementById('btn').onmousedown = function () {
console.log('mousedown');
}
document.getElementById('btn').onmouseup = function () {
console.log('mouseup');
}
</script>
</body>
</html> Nach dem Login kopieren
Im obigen Code haben wir vier Ereignisse onclick, ondblclick, onmousedown und onmouseup an das Element gebunden.
Klicken Sie dann auf das Element und die Konsole gibt nacheinander Mousedown, MouseUp und Klicken aus.
Wenn Sie auf das Element doppelklicken, gibt die Konsole nacheinander Mousedown, Mouseup, Click, Mousedown, Mouseup, Click und Dblclick aus. Die Reihenfolge der Ereignisauslösung ist also onmousedown, onmouseup, onclick, ondblclick.
Wenn Sie also das Onclick-Ereignis verwenden und mehrere Ereignisse im Zusammenhang mit Maustasten binden, müssen Sie auf die Ereignisverarbeitungslogik achten, um unerwartete Probleme zu vermeiden.
Ereignisobjekt
Im Onclick-Ereignis können wir das Ereignisobjekt über den Ereignisparameter abrufen, der ereignisbezogene Informationen enthält.
Das Ereignisobjekt event ist eine Instanz von MouseEvent. Es erbt UIEvent und Event, sodass das Ereignisobjekt alle Eigenschaften und Methoden von UIEvent und Event enthält.
MouseEvent-Eigenschaften:
MouseEvent-Methoden:
getModifierState(): Gibt einen booleschen Wert zurück, der angibt, ob die angegebene Taste gedrückt wird.
initMouseEvent(): Initialisiert das Ereignisobjekt.
preventDefault(): Standardverhalten zur Verhinderung von Ereignissen.
stopImmediatePropagation(): Verhindert, dass Ereignisse nach oben sprudeln, und verhindert die weitere Erfassung oder Sprudelung von Ereignissen.
stopPropagation(): Verhindert, dass Ereignisse sprudeln.
So registrieren Sie Klickereignisse
onclick-Attribut ist ein Attribut von Element. Sein Wert ist eine Funktion. Wenn das Klickereignis ausgelöst wird, wird diese Funktion ausgeführt.
<button onclick="console.log('click')">click</button> Nach dem Login kopieren
addEventListener()
addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
console.log('click');
});
</script> Nach dem Login kopieren
attachEvent()
attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick', function() {
console.log('click');
});
</script> Nach dem Login kopieren
结语
click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。
【相关推荐：JavaScript视频教程 、web前端 】
[Verwandte Empfehlungen: 
![Eingehende JavaScript-Analyse [Web-Frontend muss über Grundkenntnisse verfügen]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![Grundlegende JavaScript-Syntax [dom|bom|es6 neue Syntax|jQuery|Datenvisualisierungs-Echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
