Explication détaillée des exemples de fonctions d'écoute de liaison JavaScript pour les compétences event handles_javascript

L'exemple de cet article décrit comment JavaScript lie les fonctions d'écoute aux gestionnaires d'événements. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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 seules 3 sont fiables :

1. Méthode de reliure 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. Cette méthode de liaison prend en charge les étapes de capture et de bouillonnement du traitement temporel ; plusieurs fonctions d'écoute peuvent être enregistrées pour le même gestionnaire d'événements du même élément et, à l'intérieur de la fonction d'écoute, cela 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. Cette méthode de liaison peut enregistrer le même handle d'événement 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 se produit, pas le nœud actuel, et dans Événement d'IE Il n'y a pas de propriété DOM currentTarget équivalente dans l'objet.

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;
};

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 );
}

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.