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

Objet événement, objet source d'événement, analyse et compréhension du flux d'événements en js

Objet événement (événement)

• Qu'est-ce qu'un événement : l'événement fait référence à tous les événements qui peuvent se produire dans js et sont surveillés, tels que as (changements de souris, de clavier et de fenêtre de navigateur, etc.)

• Qu'est-ce qu'un objet événementiel (événement) : En termes simples, c'est 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 = function(event){let e = event || window.event}

Event source. object

En termes simples, 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
  Pour les méthodes d'écriture compatibles, reportez-vous à l'objet événement

Flux d'événements

Flux d'événements est principalement divisé en deux catégories : 1. Capturer l'événement 2. L'ordre de déclenchement de l'événement bouillonnant est de capturer d'abord puis de bouillonner
Cependant, s'il est subdivisé, il y aura une étape cible après la capture de l'étape bouillonnante, c'est-à-dire l'opération étape pour que l'élément DOM soit spécifiquement exploité

Capturer les é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.

Les événements de bulle

sont opposés aux événements de capture. Ils sont transmis de l'intérieur vers l'extérieur lorsque l'utilisateur clique sur p, ils seront 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énements

Nous lions les mêmes événements que tous les éléments enfants doivent déclencher à 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 à boucler les événements de clic sur li

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("i")
            }
        }

La méthode d'utilisation de la délégation d'événement est

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

• Avantages
• Amélioration des performances, il n'est pas nécessaire de parcourir tous les éléments les lier un à un par un événement déterminé.
• Flexible, de nouveaux éléments peuvent être créés dynamiquement sans relier les événements.

Prévenir le bouillonnement d'événements et bloquer les événements par défaut

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

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

function stopBubble(event){
    var e = event||window.event //事件对象兼容写法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法}

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

***Bloquez la balise a et les événements de saut et de menu par défaut du bouton droit de la souris

function cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

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

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!