Explication détaillée de l'objet d'événement dom JavaScript et de l'instance d'objet d'événement IE

Objet événement : Lorsqu'un événement sur le DOM est déclenché, un événement objet événement sera généré. Cet objet contient toutes les informations liées à l'événement, y compris l'élément qui a provoqué l'événement, Le type d'événement et d'autres informations liées à l'événement spécifique.

Objet événement dans le DOM

Un navigateur compatible DOM transmettra un objet événement au gestionnaire d'événements, indépendamment de la spécification le gestionnaire d'événements, que la méthode DOM0 ou DOM2 soit utilisée, l'objet événement sera transmis. L'objet événement n'existe que pendant l'exécution du gestionnaire d'événements. Une fois l'exécution du gestionnaire d'événements terminée, l'objet événement sera détruit. Voici un exemple de code :

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
 console.log(event.type);
}, false);

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 déclenchés sont différents et les méthodes de propriété disponibles sont également différentes. Mais tous les événements auront les propriétés ou méthodes suivantes :

• bulles : valeur booléenne, indiquant si l'événement fait des bulles

• annulable : valeur booléenne , indiquant si le comportement par défaut de l'événement peut être annulé

• currentTarget: element, l'élément dans lequel le gestionnaire d'événement traite actuellement l'événement

• defaultPrevented : valeur booléenne, indiquant si la méthode PreventDefault() a été appelée

• detail : entier, informations détaillées liées à l'événement

• eventPhase : entier, événement appelant Les étapes du gestionnaire, 1 représente l'étape de capture, 2 représente l'étape cible et 3 représente l'étape de bouillonnement

• preventDefault() : fonction, la valeur par défaut comportement d'annulation de l'événement, peut être appelé lorsque l'annulation est vraie La méthode

• stopImmediatePropagation() : fonction qui annule la capture ou le bouillonnement ultérieur d'événements tout en empêchant l'appel de tout gestionnaire d'événement

• stopPropagation () : Fonction, annule la capture ou le bouillonnement ultérieur d'événements. Cette méthode peut être appelée lorsque les bulles sont vraies

• cible : élément, l'élément. cible de l'événement

• trusted : valeur booléenne, lorsque vrai, cela signifie que l'événement a été généré par le navigateur, sinon cela signifie que l'événement a été créé via JS

• type : String, le type d'événement qui a été déclenché

• view : La vue abstraite associée à l'événement, équivalente à l'objet window où l'événement s'est produit

L'exemple de code suivant montre l'utilisation de certains des attributs ci-dessus. Il peut également nous aider à mieux comprendre le flux des événements. Supposons qu'il y ait un bouton « myBtn » sur la page. Lorsque vous cliquez sur le bouton, this et currentTarget sont égaux à l'élément body car le gestionnaire d'événements est enregistré sur l'élément body. La valeur de target est égale à l'élément bouton, car il s'agit de la véritable cible de l'événement de clic. Puisqu'aucun gestionnaire d'événements n'est enregistré sur le bouton, l'événement "clic" remonte vers document.body avant d'être traité.

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

Regardez un autre exemple. Dans le code ci-dessous, la méthode stopPropagation() annule la capture ou le bouillonnement ultérieur des événements. Lorsque je clique sur le bouton, les gestionnaires d'événements de clic sur les éléments du bouton et du corps doivent être déclenchés en raison du mécanisme de bouillonnement d'événements, produisant "From Bth..." et "From Body...". Désormais, l'événement click ne peut plus se propager dans la hiérarchie DOM après le déclenchement sur l'élément bouton, de sorte que le gestionnaire d'événements sur le corps ne sera pas déclenché.

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log("From Bth ...");
 event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
 console.log("From Body ...");
};

Objet événement dans IE

Dans IE, lors de l'ajout d'un gestionnaire d'événements à l'aide de la méthode DOM0, l'objet événement agit comme un window Une propriété de l'objet existe. S'il est ajouté via la méthode attachEvent(), l'objet événement est transmis à la fonction de traitement d'événements en tant que paramètre. Voici un exemple de code :

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 var event = window.event;
 console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
 console.log(event.type); // "click"
});

L'objet événement d'IE contient également des propriétés et des méthodes liées à l'événement qui l'a créé. Ces propriétés et méthodes varient également en fonction du type d'événement. Mais tous les objets événement contiendront les propriétés suivantes :

• cancelBubble : valeur booléenne, lisible et inscriptible, par défaut sur false. Annuler le bouillonnement d'événement lorsqu'il est défini sur true

• returnValue : valeur booléenne, lisible et inscriptible, par défaut sur true. Le comportement par défaut d'annulation de l'événement lorsqu'il est défini sur false

• srcElment: element, l'élément cible de l'événement, identique à l'attribut cible dans le DOM

• type : chaîne, type d'événement

Dans IE, la portée du gestionnaire d'événements est déterminée en fonction de la manière dont il est spécifié. La valeur de this n'est pas déterminée. pointent nécessairement vers l’élément cible de l’événement. Par conséquent, il est plus sûr d’utiliser l’attribut srcElement. Veuillez regarder l'exemple de code ci-dessous. Dans la première méthode, la valeur de this est l'élément cible, et dans la deuxième méthode, comme mentionné précédemment, le gestionnaire d'événements de cette méthode est exécuté dans la portée globale, donc la valeur de this. est une fenêtre.

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 console.log(window.event.srcElement === this); // true
}
btn.attachEvent("onclick", function(event) {
 console.log(event.srcElement === this); // false
});

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!