Explication détaillée du flux d'événements et des gestionnaires d'événements en JavaScript (tutoriel graphique)

Le flux d'événements fait référence à l'ordre dans lequel les événements sont reçus de la page, tandis que le gestionnaire d'événements gère la réponse à l'événement. Ensuite, nous expliquerons en détail le flux d'événements et le gestionnaire d'événements en JavaScript

<.>Flux d'événements : il existe deux types. Les IE sont un flux bouillonnant d'événements. L'événement est reçu de l'élément le plus spécifique au début et propagé vers des nœuds moins spécifiques (Élément -> Document). Le contraire est le flux de capture d'événements de Netscape.

Les événements de niveau DOM2 stipulent que le flux d'événements comprend trois étapes : l'étape de capture d'événement, l'étape cible et l'étape de bouillonnement d'événement.

Dans la plupart des cas, les gestionnaires d'événements sont ajoutés à la phase bouillonnante du flux d'événements. Un exemple d'EventUtil :

var EventUtil = {
  addHandler: function(element, type, handler){
    if(element.addEventListener){
      element.addEventListener(type, handler, false);
    }else if(element.attachEvent){
      element.attachEvent('on' + type, handler); // IE8
    }else{
      element['on' + type] = handler;
    }
  },
  removeHandler: function(){...}
}

Regardons-le en détail :

Gestionnaire d'événements de niveau DOM0La manière traditionnelle de spécifier un gestionnaire d'événements via Javascript est de Fonction affecté à une propriété de gestionnaire d’événements. Chaque élément possède ses propres attributs de gestionnaire d'événements, qui sont généralement tous en minuscules, comme onclick. En définissant la valeur de cette propriété sur une fonction, vous pouvez spécifier un gestionnaire d'événements.

var btn = document.getElementById('myBtn');
// 添加事件处理程序
btn.onclick = function () {
  alert( this );//为DOM元素btn
};
// 移除事件处理程序
btn.onclick = null;

Avantages : 1. Simple 2. Présente des avantages multi-navigateurs

Inconvénients : les gestionnaires d'événements ne sont pas spécifiés avant l'exécution du code, ces codes sont donc derrière les boutons de la page, là Il se peut qu'il n'y ait aucune réponse, quelle que soit la façon dont vous cliquez pendant un certain temps, et l'expérience utilisateur se détériorera.

Le gestionnaire d'événements au niveau DOM2 définit deux méthodes pour gérer les opérations de spécification et de suppression des gestionnaires d'événements : addEventListener() et removeEventListener(). Trois paramètres, 1. Le nom de l'événement à traiter. 2. Une fonction de gestionnaire d'événements. 3. Une valeur booléenne. La dernière valeur booléenne est true, ce qui signifie que le gestionnaire d'événements est appelé pendant la phase de capture, et false, ce qui signifie que le gestionnaire d'événements est appelé pendant la phase de bouillonnement.

// 添加多个事件处理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function (){
  alert( this );// 为DOM元素btn
},false );
btn.addEventListener('click',function () {
  alert('Hello World');
},false);

// 移除事件处理程序
btn.removeEventListener('click',function () {
  // 匿名函数无法被移除,移除失败
},false);
  // 改写
  var handler = function () {
  alert(this.id);
  };
  btn.addEventListener('click',handler,false);
  // 再次移除事件处理程序
  btn.removeEventListener('click',handler,false);// 移除成功

Ces deux gestionnaires d'événements se déclencheront dans l'ordre dans lequel ils sont ajoutés. Dans la plupart des cas, des gestionnaires d'événements sont ajoutés à la phase de bouillonnement du flux d'événements, afin de maximiser la compatibilité avec les différentes versions de navigateurs.

Avantages : plusieurs gestionnaires d'événements peuvent être ajoutés à un seul élément.

Inconvénients : les navigateurs IE8 et inférieurs ne prennent pas en charge les gestionnaires d'événements de niveau DOM2. (Y compris IE8)

Le gestionnaire d'événements IE définit deux méthodes, similaires à celles ci-dessus : attachEvent(), detachEvent(). Les deux méthodes reçoivent les deux mêmes paramètres : le nom du gestionnaire d'événements et la fonction du gestionnaire d'événements. Étant donné qu'IE8 et les navigateurs antérieurs ne prennent en charge que le bouillonnement d'événements, les gestionnaires d'événements ajoutés via detachEvent() seront ajoutés à la phase de bouillonnement.

var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
  alert( this );// window
});
btn.attachEvent('onclick', funciton(){
  alert("HELLO, WORLD");
});

Lorsque vous cliquez sur le bouton, l'ordre de déclenchement de ces deux gestionnaires d'événements est exactement l'opposé de celui ci-dessus. Au lieu de déclencher les gestionnaires d’événements dans l’ordre dans lequel ils ont été ajoutés, c’est bien le contraire.

Avantages : plusieurs gestionnaires d'événements peuvent être ajoutés à un seul élément.

Inconvénients : ne prend en charge qu'IE.

Gestionnaire d'événements multi-navigateurs

par exemple :

var EventUtil = {
  addHandler : function ( ele, type, handler ) {
    if ( ele.addEventListener ) {
      ele.addEventListener( type, handler, false );
    } else if ( ele.attachEvent ) {
      ele.attachEvent( 'on' + type, handler );
    } else {
      ele['on' + type] = handler
    }
  },
  removeHandler: function ( ele, type, handler ) {
    if ( ele.removeEventListener ) {
      ele.removeEventListener( type, handler, false );
    } else if ( ele.detachEvent ) {
      ele.detachEvent( 'on' + type, handler );
    } else {
      ele[ 'on' + type ] = null;
    }
  }
}

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. vous à l'avenir.

Articles associés :

Conseils JavaScript de base (tutoriels image et texte, réponses détaillées pour vous)

Parcours des valeurs dans la collection EL expression List en javascript

Analyse détaillée et analyse du principe de fonctionnement 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!