Les membres publics des événements dans DOM incluent des propriétés et des méthodes Les types d'événements déclenchés sont différents, et les propriétés et méthodes disponibles sont différentes. Cependant, tous les événements du DOM ont des membres publics. Cet article présente principalement les membres publics (propriétés et méthodes) des événements dans les événements javaScript. Il est très bien et a une valeur de référence. Les amis dans le besoin peuvent s'y référer
<.> 1. Membres publics de l'objet événement
1. Membres publics de l'événement dans le DOM
L'objet événement contient et crée des propriétés et des méthodes liées à des événements spécifiques. Les types d'événements déclenchés sont différents, tout comme les propriétés et méthodes disponibles. Cependant, tous les événements du DOM ont les membres publics suivants.
a. Comparez currentTarget et target
Dans le gestionnaire d'événements, l'objet this est toujours égal à la valeur de currentTarget, tandis que target contient simplement la valeur réelle. cible de l'événement.
Par exemple : il y a un bouton sur la page et un événement de clic est enregistré dans le corps (le nœud parent du bouton). Lorsque vous cliquez sur le bouton, l'événement de clic remonte jusqu'au corps. pour le traitement.
<body>
<input id="btn" type="button" value="click"/>
<script>
document.body.onclick=function(event){
console.log("body中注册的click事件");
console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
}
</script>
</body>Copier après la connexion
Le résultat en cours d'exécution est :
b. utilisez l'attribut type dans une fonction pour gérer plusieurs événements.
Principe : En détectant l'attribut event.type, différents événements sont traités différemment.
Exemple : Définissez une fonction de gestionnaire pour gérer trois types d'événements : clic, survol de la souris, sortie de la souris.
<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
switch (event.type){
case "click":
alert("clicked");
break;
case "mouseover":
event.target.style.backgroundColor="pink";
break;
case "mouseout":
event.target.style.backgroundColor="";
}
};
var btn=document.getElementById("btn");
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
</script>
</body>Copier après la connexion
Effet d'exécution : cliquez sur le bouton et une boîte de dialogue apparaîtra. Lorsque la souris passe sur le bouton, la couleur d'arrière-plan du bouton devient rose ; lorsque la souris quitte le bouton, la couleur d'arrière-plan revient à la couleur par défaut.
Comparaison c, stopPropagation() et stopImmediatePropagation()
Idem : stopPropagation() et stopImmediatePropagation() peuvent tous deux être utilisés pour annuler une capture ou une propagation ultérieure d'événements.
Différence : La différence entre les deux est que lorsqu'un événement a plusieurs gestionnaires d'événements, stopImmediatePropagation() peut empêcher l'appel des gestionnaires d'événements suivants.
Exemple :
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",function(event){
console.log("buttn click listened once");
// event.stopPropagation();//取消注释查看效果
// event.stopImmediatePropagation();//取消注释查看效果
},false);
btn.addEventListener("click",function(){
console.log("button click listened twice");
},false);
document.body.onclick= function (event) {
console.log("body clicked");
}
</script>
</body>Copier après la connexion
Effet opérationnel :
d, eventPhase
La valeur eventPhase est 1 en phase de capture, 2 en phase cible et 3 en phase de bouillonnement.
Exemple :
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log("按钮DOM0级方法添加事件处理程序eventPhase值为？"+event.eventPhase);
}
btn.addEventListener("click",function(event){
console.log("按钮DOM2级方法添加事件处理程序，且addEventListener第三个参数为true时eventPhase值为？"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
console.log("按钮DOM2级方法添加事件处理程序，且addEventListener第三个参数为false时eventPhase值为？"+event.eventPhase);
},false);
document.body.addEventListener("click", function (event) {
console.log("body上添加事件处理程序，且在捕获阶段eventPhase值为？"+event.eventPhase);
},true);
document.body.addEventListener("click", function (event) {
console.log("body上添加事件处理程序，且在冒泡阶段eventPhase值为？"+event.eventPhase);
},false);
</script>Copier après la connexion
Effet de course :
2. Membres publics des événements dans IE
Les attributs et méthodes des événements dans IE, comme DOM, varient selon les différents types d'événements, mais il existe également des membres publics que possèdent tous les objets et la plupart. de ces membres ont des attributs ou des méthodes DOM correspondants.
Ce qui précède est le résumé de l'apprentissage des événements javaScript introduit par l'éditeur (4) des connaissances liées aux membres publics (propriétés et méthodes) de l'événement. utile à tout le monde. Aide, si vous avez des questions, laissez-moi un message !
Recommandations associées :
-
Résumé de l'apprentissage de l'événement JavaScript (2) gestionnaire d'événements js
Résumé de l'apprentissage des événements JavaScript (1) Flux d'événements
Résumé de l'apprentissage des événements JavaScript (5) Événements de souris des types d'événements en js
Résumé de l'apprentissage de l'événement JavaScript (3) objet d'événement js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
