Une explication détaillée des objets d'événement, des objets sources d'événements et des flux d'événements dans js

• Que sont les événements : les événements font référence à tous les événements qui peuvent survenir dans js et qui sont surveillés, tels que : (modifications de la souris, du clavier, de la fenêtre du navigateur, etc.)

• Qu'est-ce qu'un objet événementiel (événement) : En termes simples, il s'agit d'un objet qui enregistre diverses informations sur l'événement.
  Ce qu'il faut noter ici, c'est que l'objet événement aura des problèmes de compatibilité. Dans les navigateurs autres que IE, il s'agit d'un événement, mais dans les non-navigateurs, il s'agit de window.event.

 btn.onclick = fonction (événement) {let e = événement ||

Pour faire simple, il fait référence à l'objet spécifique sur lequel l'événement s'est produit. Pour les éléments élément, l'objet source de l'événement fait référence à l'élément sur lequel vous avez cliqué. Il existe également des problèmes de compatibilité avec les navigateurs :

• Dans FireFox, c'est event.srcElement
• Dans IE, c'est event.target
  La méthode d'écriture compatible fait référence à l'objet événement

flux d'événements

Les flux d'événements sont principalement divisés en deux catégories : 1. Événements de capture 2. Événements de bouillonnement L'ordre de déclenchement est de capturer d'abord, puis de bouillonner. Mais s'il est subdivisé, il y aura une étape cible après la capture de l'étape de bouillonnement. c'est-à-dire l'élément DOM qui est spécifiquement exploité étape de l'opération à effectuer.

capturer des événements

Le nœud le plus élevé reçoit d'abord l'événement, puis le propage vers le bas jusqu'au nœud spécifique. Par exemple : lorsque l'utilisateur clique sur l'élément p et utilise la capture d'événement, l'événement de clic sera propagé dans l'ordre document>htm>body>p. Le mode de transmission est de l’extérieur vers l’intérieur.

événements bouillonnants

Contrairement à l'événement de capture, il est transmis de l'intérieur vers l'extérieur. Lorsque l'utilisateur clique sur p, il sera transmis au parent, p>body>html. ***Parce que cette fonctionnalité est souvent utilisée pour la délégation d'événements.

délégation d'événement

Nous lions les mêmes événements devant être déclenchés par tous les éléments enfants à l'élément parent, ce qui peut réduire les opérations DOM et améliorer les performances. La méthode d'utilisation spécifique consiste à utiliser la méthode objet source d'événement.

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

Pour lier les événements de clic à li, notre approche consiste généralement à parcourir les événements de clic à li

 laissez oLi = document.querySelectorAll("li")
 pour(laissez i; i < oLi.length; i++){
            oLi[i].onclick = fonction(){
                console.log("i")
            }
        }

La façon d'utiliser la délégation d'événements est

 let oUl = document.querySelector("ul")
  oUl.onclick = fonction (événement) {
            soit e = événement ||
            console.log(e.target.innerHTML)
        }

• avantage
• Améliorez les performances, pas besoin de parcourir tous les éléments pour lier les événements un par un.
• De nouveaux éléments flexibles peuvent être créés dynamiquement sans relier les événements.

Opération pour empêcher la propagation d'événements (écriture de compatibilité)

***Certains événements ne nécessitent pas d'opérations de bullage

 fonction stopBubble(événement){
    var e = event||window.event //Méthode d'écriture compatible avec les objets d'événement e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //Méthode d'écriture compatible IE}

Bloquer les événements par défaut (méthode d'écriture compatible)

*** Bloquer une balise et un saut par défaut avec le bouton droit de la souris et des événements de menu

 fonction CancelHandle (événement) {
    var e = événement||fenêtre.événement
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

Recommandations associées : [Tutoriel vidéo JavaScript]

Ce qui précède est une explication détaillée de l'objet événement, de l'objet source d'événement et du flux d'événements dans js. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !