Explication détaillée de l'implémentation JavaScript des exemples de fonctions d'écoute de liaison pour les descripteurs d'événements

Cet article présente principalement la méthode de liaison des fonctions d'écoute aux gestionnaires d'événements en JavaScript. Il analyse les techniques courantes et les précautions de liaison d'événements JavaScript sous forme d'exemples. J'espère que cela pourra aider tout le monde. .

La liaison des fonctions d'écoute d'événements aux éléments Dom en JavaScript est une chose très courante, mais il y a aussi de nombreux bugs ici. Différents navigateurs proposent de nombreuses méthodes de liaison d'événements, mais seulement 3 sont fiables :

1. Méthode de liaison traditionnelle :

elem.onclick = function( event ){
  alert(event.type + 'this.innerHTML');
};

a. La méthode de liaison traditionnelle est très simple et stable. Dans le corps de la fonction, elle pointe également vers le nœud qui traite l'événement (comme le nœud qui exécute actuellement le gestionnaire d'événements).

b. Un gestionnaire d'événements d'un élément ne peut enregistrer qu'une seule fonction. S'il est enregistré à plusieurs reprises, un écrasement se produira de plus, la méthode de liaison traditionnelle ne s'exécutera que dans le bouillonnement d'événements.

2. Méthode de liaison standard du W3C :

var elem = document.getElementById('ID');
elem.addEventListener('click' ,
          function( event ){
            alert(event.type + ' ' + this.innerHTML + 1);
          } ,
          false  //冒泡阶段执行
);
elem.addEventListener('click' ,
          function( event ){
            alert(event.type + ' ' + this.innerHTML + 2);
          } ,
          false
);

a. : capture et bouillonnement ; le même gestionnaire d'événements du même élément peut enregistrer plusieurs fonctions d'écoute de plus, cela à l'intérieur de la fonction d'écoute pointe vers l'élément actuel ;

b. Cependant, le navigateur IE populaire ne prend pas en charge cette méthode d'enregistrement.

3. Méthode d'enregistrement du gestionnaire d'événements IE :

var elem = document.getElementById('a');
elem.attachEvent('onclick' ,
  function(){
    alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 1);
  }
);
elem.attachEvent('onclick' ,
  function(){
    alert(window.event.srcElement.innerHTML + ' ' + this.innerHTML + 2);
  }
);

a. le handle est enregistré plusieurs fois.

b. Le modèle d'événement d'IE ne prend pas en charge la capture d'événement ; cela dans le corps de la fonction d'écoute ne pointe pas vers l'élément actuel, et window.event.srcElement pointe vers le nœud où l'événement s'est produit, pas le nœud actuel. , et dans Il n'existe pas de propriété DOM currentTarget équivalente dans l'objet événement d'IE.

4. Première méthode multi-navigateurs :

function addEvent(element, type, handler) {
 if (!handler.guid)handler.guid = addEvent.guid++;
 if (!element.events) element.events = {};
 var handlers = element.events[type];
 if (!handlers) {
  handlers = element.events[type] = {};
  if (element["on" + type]) {
   handlers[0] = element["on" + type];
  }
 }
 handlers[handler.$$guid] = handler;
 element["on" + type] = handleEvent;
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
 if (element.events && element.events[type]) {
  delete element.events[type][handler.$$guid];
 }
};
function handleEvent(event) {
 var returnValue = true;
 event = event || fixEvent(window.event);
 var handlers = this.events[event.type];
 for (var i in handlers) {
  this.$$handleEvent = handlers[i];
  if (this.$$handleEvent(event) === false) {
   returnValue = false;
  }
 }
 return returnValue;
};
function fixEvent(event) {
 event.preventDefault = fixEvent.preventDefault;
 event.stopPropagation = fixEvent.stopPropagation;
 return event;
};
fixEvent.preventDefault = function() {
 this.returnValue = false;
};
fixEvent.stopPropagation = function() {
 this.cancelBubble = true;
};

Le code ci-dessus provient de Dean EdwardsaddEvent/removeEven

5. Deuxième méthode multi-navigateurs :

function addEvent( obj, type, fn ) {
 if ( obj.attachEvent ) {
  obj['e'+type+fn] = fn;
  obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  obj.attachEvent( 'on'+type, obj[type+fn] );
 } else
  obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
 if ( obj.detachEvent ) {
  obj.detachEvent( 'on'+type, obj[type+fn] );
  obj[type+fn] = null;
 } else
  obj.removeEventListener( type, fn, false );
}

De plus, le flux d'événements peut être divisé en événements bouillonnants et capturer le type. événements, la plupart des éléments HTML contiennent leurs propres comportements par défaut, tels que des hyperliens, des boutons de soumission, etc. Nous pouvons empêcher son comportement par défaut en ajoutant "return false" à l'événement de liaison. Si vous êtes intéressé par le pinyin, veuillez vous référer à l'introduction correspondante sur l'introduction détaillée du bouillonnement d'événements et de la capture d'événements en JS sur ce site Web.

Recommandations associées :

vue surveille les événements de défilement et une explication détaillée de l'affichage du plafond ou de la position fixe d'un élément

Comment implémenter l'événement de défilement de page de surveillance ReactJS

Explication détaillée des exemples d'utilisation de la surveillance des événements et de la publication d'événements dans Node.js

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!