Compréhension des objets événement, des objets source d'événements et du flux d'événements dans js

Analyse et compréhension des objets événement, des objets source d'événements et du flux d'événements dans js

un événement

1. Qu'est-ce qu'un événement: un événement fait référence à tous les événements qui peuvent survenir et qui sont surveillés dans js, tels que: (modifications de la souris, du clavier et de la fenêtre du navigateur, etc.)
2. Qu'est-ce qu'un objet événement (événement): De manière générale, c'est un objet qui enregistre diverses informations sur un événement.
   Il faut noter ici que l'objet événement aura des problèmes de compatibilité. Il s'agit d'un événement dans les navigateurs autres que IE, au lieu de window.event dans les navigateurs.

btn.onclick = function(event){
    
    
let e = event || window.event
}

Objet source d'événement

Pour faire simple, cela signifie que l'événement s'est produit sur cet objet. Pour l'élément é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é du navigateur:

• Event.srcElement dans fireFox
• 
  Reportez-vous à l'objet événement pour l' écriture compatible event.target dans IE

Flux d'événements

Le flux d'événements est principalement divisé en deux catégories: 1. Capturer les événements 2. La séquence de déclenchement des événements bouillonnants consiste à capturer d'abord
, puis à bouillonner, mais s'il est subdivisé, il y aura une étape cible dans la phase de bouillonnement, c'est-à-dire fonctionnement de l'élément dom. Phase de fonctionnement

Événement de capture

Le nœud supérieur reçoit d'abord l'événement, puis le propage vers des nœuds spécifiques. Par exemple: lorsque l'utilisateur clique sur l'élément div et utilise la capture d'événement, l'événement de clic sera propagé dans l'ordre document> htm> corps> div. La méthode de transfert se fait de l'extérieur vers l'intérieur.

Événement bouillonnant

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

Délégation événementielle

Nous lions le même événement déclenché 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 l'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 habituelle consiste à effectuer une boucle sur les événements de clic de champ li

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

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

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

• avantage
• Pour améliorer les performances, il n'est pas nécessaire de boucler tous les éléments un par un pour lier les événements.
• Les nouveaux éléments flexibles créés dynamiquement n'ont pas besoin de relier les événements.

Empêcher le bouillonnement d'événement et empêcher l'événement 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ération de bullage

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

Empêcher les événements par défaut (écriture compatible)

*** Empêcher une balise et le bouton droit de la souris des événements de saut et de menu par défaut

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

Pour référence d'apprentissage seulement