Comment implémenter la fonction d'écoute de liaison JavaScript pour le descripteur d'événement

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. Divers navigateurs proposent de nombreuses méthodes de liaison d'événements, mais seulement 3 sont fiables. Cet article présente principalement la méthode JavaScript pour lier les fonctions d'écoute aux gestionnaires d'événements et analyse les techniques et méthodes courantes de liaison d'événements JavaScript sous forme d'exemples. les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

1. Méthode de reliure traditionnelle :

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

a. Le corps de la fonction pointe également vers le nœud qui traite l'événement (tel que le nœud exécutant 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 ; ceci 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 :

Exemples détaillés d'applications d'écoute audio et vidéo en HTML5

vue écoute l'événement de défilement d'un élément pour plafond ou affichage de position fixe explication détaillée

Explication détaillée du modèle d'événement javascript, de l'objet, de la surveillance et des exemples de code de livraison

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!