, la console affichera btn, div3, div2, div1, c'est la séquence de déclenchement de l'événement onclick.
L'ordre dans lequel les événements sont déclenchés
Dans l'événement onclick, si l'on lie plusieurs événements liés aux boutons de la souris, quel est l'ordre dans lequel ces événements sont déclenchés ?
<!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> Dans le code ci-dessus, nous avons lié quatre événements onclick, ondblclick, onmousedown et onmouseup à l'élément
Cliquez ensuite sur l'élément et la console affichera mousedown, mouseup et cliquer dans l'ordre.
Si vous double-cliquez sur l'élément , la console affichera mousedown, mouseup, click, mousedown, mouseup, click, dblclick dans l'ordre.
Donc, l'ordre de déclenchement des événements est onmousedown, onmouseup, onclick, ondblclick.
Ainsi, lorsque vous utilisez l'événement onclick, si plusieurs événements liés aux boutons de la souris sont liés, vous devez faire attention à la logique de traitement des événements pour éviter certains problèmes inattendus.
Objet événement
Dans l'événement onclick, nous pouvons obtenir l'objet événement via le paramètre event, qui contient des informations relatives à l'événement.
L'objet événement event est une instance de MouseEvent. Il hérite de UIEvent et Event, donc l'objet événement contient toutes les propriétés et méthodes de UIEvent et Event.
PropriétésMouseEvent :
MéthodesMouseEvent :
getModifierState() : renvoie une valeur booléenne indiquant si la touche spécifiée est enfoncée.
initMouseEvent() : initialise l'objet événement.
preventDefault() : comportement par défaut pour empêcher les événements.
stopImmediatePropagation() : empêche les événements de se propager vers le haut et empêche une capture ou un bouillonnement ultérieur des événements.
stopPropagation() : empêche les événements de bouillonner.
Comment enregistrer des événements de clic
Les événements de clic peuvent être enregistrés via l'attribut onclick, la méthode addEventListener() et la méthode attachEvent().
attribut onclick
L'attribut onclick est un attribut d'Element. Sa valeur est une fonction Lorsque l'événement click est déclenché, cette fonction sera exécutée.
<button onclick="console.log('click')">click</button> addEventListener()
addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
console.log('click');
});
</script> attachEvent()
attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick', function() {
console.log('click');
});
</script> 结语
click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。
【相关推荐：JavaScript视频教程 、web前端 】
