Comprendre les objets d'événement JavaScript_javascript conseils

Lorsqu'un événement sur le DOM est déclenché, un événement d'objet événement sera généré.

Objet événement dans DOM

Les navigateurs compatibles DOM transmettront un objet événement au gestionnaire d'événements. L'objet événement contient des propriétés et des méthodes liées à l'événement spécifique qui l'a créé. Les types d'événements de division sont différents et les méthodes d'attributs disponibles sont différentes. Cependant, tous les événements auront des membres répertoriés dans le tableau ci-dessous.

Les propriétés définies par la norme d'événement DOM de niveau 2 sont répertoriées ci-dessous :

• bulles : renvoie une valeur booléenne indiquant si l'événement est un événement de type bulle.
  
• cancelable : renvoie une valeur booléenne indiquant si l'événement peut avoir une action par défaut annulable.
  
• currentTarget : renvoie l'élément dont l'écouteur d'événement a déclenché cet événement.
  
• eventPhase : renvoie la phase actuelle de propagation de l'événement.
  
• target : Renvoie l'élément qui a déclenché cet événement (le nœud cible de l'événement).
  
• timeStamp : renvoie la date et l'heure auxquelles l'événement a été généré.
  
• type : renvoie le nom de l'événement représenté par l'objet Event actuel.
  

Vous trouverez ci-dessous les méthodes définies par la norme d'événement DOM de niveau 2. Le modèle d'événement d'IE ne prend pas en charge ces méthodes :

• initEvent() : initialise les propriétés de l'objet Event nouvellement créé.
• preventDefault() : Informe le navigateur de ne pas effectuer l'action par défaut associée à l'événement.
• stopPropagation() : Ne diffuse plus d'événements.

ceci, cible, currentTarget

Dans le gestionnaire d'événements, l'objet this est toujours égal à la valeur de currentTarget, et target ne contient que la cible réelle de l'événement. Si le gestionnaire d'événements est affecté directement à l'élément cible, this, currentTarget et target contiennent les mêmes valeurs. Tel que :

var btn = document.querySelector("#btn");
btn.onclick=function () {
  console.log(event.currentTarget === this); //true
  console.log(event.target === this); //true
}

Puisque la cible de l'événement click est le bouton btn, ces trois valeurs​​sont égales. Si le gestionnaire d'événements se trouve dans le nœud parent du bouton (document.body), alors ces valeurs ne sont pas les mêmes. Tel que :

var btn = document.querySelector("#btn");
document.body.onclick=function () {
  console.log(event.currentTarget === document.body); //true
  console.log(this === document.body); //true
  console.log(event.target === btn); //true 因为btn没有注册事件处理程序，所以该click事件就冒泡到了document.body
}

Ici, this et currentTarget sont tous deux document.body, car le gestionnaire d'événements est enregistré auprès de cet élément. Mais l'élément cible est égal à l'élément bouton car c'est la véritable cible de l'événement de clic. Étant donné que le bouton n'a pas de gestionnaire d'événements enregistré, l'événement de clic remonte vers document.body, où l'événement peut être géré.

1. tapez

Lorsque vous devez gérer plusieurs événements via une seule fonction, vous pouvez utiliser l'attribut type. Tel que :

//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
  switch (event.type) {
    case "click":
      console.log("i click it");
      break;
    case "mouseover":
      console.log("i enter it");
      break;
    case "mouseout":
      console.log("i leave it");
      break;
  }
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

2. prévenirDefault()

Pour éviter le comportement par défaut pour un événement spécifique, vous pouvez utiliser cette méthode. Tel que :

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  var currentATag = aTags[i];
  currentATag.onclick = function() {
    event.preventDefault();
  }
};

Le code ci-dessus bloque toutes les fonctions de lien hypertexte de balise sur la page Web. Il convient de noter que seuls les événements dont l'attribut Cancelable est défini sur true peuvent utiliser PreventDefault() pour annuler leur comportement par défaut.

3. stopPropagation()

Arrêtez immédiatement la propagation des événements dans la hiérarchie DOM, c'est-à-dire annulez toute capture ou bouillonnement d'événements ultérieurs. Par exemple, un gestionnaire d'événements ajouté directement à un bouton peut appeler cette méthode pour éviter de déclencher le gestionnaire d'événements enregistré sur document.body. Tel que :

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  // event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果：
//btn clicked
//clicked

Autre exemple :

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果：
//btn clicked

eventPhase

Cet attribut est utilisé pour déterminer à quelle étape du flux d'événements se trouve actuellement l'événement.

• Si c'est la phase de capture, elle est égale à 1
  
• Si c'est l'étape objet cible, elle est égale à 2
  
• Si c'est le stade bouillonnant, il est égal à 3
  

Par exemple :

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段

btn.onclick = function() {
  console.log("btn" + event.eventPhase);
} //目标对象阶段，实际上属于冒泡阶段（在btn上）

document.body.onclick = function() {
  console.log("body" + event.eventPhase);
} //冒泡阶段（在body上）

Autre exemple :

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //1
  console.log(event.currentTarget); //HTMLBodyElement
}, true);

btn.addEventListener("click", function() {
  console.log(event.eventPhase); //2
  console.log(event.currentTarget); //HTMLInputElement
});

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //3
  console.log(event.currentTarget); //HTMLBodyElement
});

Le processus est en gros :

phase de capture document.body -> phase objet cible btn --> phase de bouillonnement document.body

Ce qui précède concerne les objets d'événement JavaScript, j'espère que cela sera utile à l'apprentissage de chacun.