, 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> Copier après la connexion
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> Copier après la connexion
addEventListener()
addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
console.log('click');
});
</script> Copier après la connexion
attachEvent()
attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。
<button id="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick', function() {
console.log('click');
});
</script> Copier après la connexion
结语
click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。
【相关推荐：JavaScript视频教程 、web前端 】
![Analyse approfondie de JavaScript [Le front-end Web doit connaître les compétences de base]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![Syntaxe de base JavaScript [dom|bom|es6 nouvelle syntaxe|jQuery|echarts de visualisation de données]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
