Interprétation détaillée de la gestion des événements multi-navigateurs de JavaScript_Connaissances de base

1. À propos de l'obtention de l'objet événement

FF est un peu têtu et ne prend en charge que les arguments[0] et ne prend pas en charge window.event. Je ne blâme vraiment pas IE cette fois. Bien que l'utilisation d'un événement comme attribut de fenêtre soit contraire à la norme, tout le monde a déjà reconnu l'existence de ce petit problème. Seul FF est unique après tant d'années. Il existe donc deux manières d’obtenir des objets événementiels multi-navigateurs :

Avec du ginseng :

getEvent : function(event){
  return event ? event : window.event;
  //return event || window.event;//或者更简单的方式
}

Sans ginseng :

function getEvent() {
  return arguments[0] ? arguments[0] : window.event;
  //return arguments[0] || window.event;//或者更简单的方式
}

Une méthode doit être expliquée en particulier : la méthode HTML de niveau DOM0, gestionnaire d'événements avec paramètres, comme suit :

function handler(event){
  //do something
}
<!-- HTML的DOM0级方式 --><br /><button id="btn" onclick="handler(event);">按钮</button><br />

La méthode ci-dessus est compatible avec tous les navigateurs, mais les inconvénients de s'appuyer sur la méthode de niveau DOM0 de HTML sont évidents, elle n'est donc pas devenue une méthode courante comme les deux premières, et la méthode de niveau DOM0 de JS a un traitement d'événements avec un périphérique de paramètres. , comme suit :

function handler(event){
  //do something
}
btn.onclick = handler;//JS的DOM0级方式
//btn.onclick = function(event){/*do something*/}//或者匿名函数，效果同上

Cette méthode n'est pas compatible avec tous les navigateurs, [IE8-] n'est pas pris en charge, IE9 est inconnu, FF et Chrome la prennent en charge. J'ai toujours pensé que le traitement des événements au niveau DOM0 de HTML et le traitement des événements au niveau DOM0 de JS étaient équivalents. Maintenant, j'ai fait beaucoup d'expériences et j'ai découvert qu'il y avait une différence entre les deux

.

2. À propos de l'obtention de la source de l'événement

event.srcElement est la seule méthode pour [IE8-], IE9 est inconnu, d'autres navigateurs prennent en charge la méthode standard event.target

3. À propos du comportement par défaut des événements bloquants

event.preventDefault() est une méthode standard, mais [IE8-] ne la prend pas en charge. La propre méthode d'IE est event.returnValue = false;

.

4. Concernant l'arrêt de la propagation des événements

event.stopPropagation() est une méthode standard. IE a une autre objection. Il veut jouer comme ceci : event.cancelBubble = true ; une attention particulière doit être accordée ici car Cancel est un attribut plutôt qu'une méthode. loin du standard et facile à utiliser. Mal mémorisé

.

5. À propos de l'ajout et de la suppression de gestionnaires d'événements

Méthode DOM niveau 0

ele.onclick = handler;ele.onclick=null;La méthode la plus ancienne

Avantages : Compatible avec tous les navigateurs

Inconvénient : le même événement ne peut lier/dissocier qu'un seul gestionnaire d'événements

Méthode DOM niveau 2

ele.add/removeEventListener(eventType, handler, catch);

Et le mode IE : ele.attach/detachEvent('on' eventType, handler);

Avantages : prend en charge la liaison/dissociation de plusieurs gestionnaires d'événements

Inconvénients : un jugement de compatibilité doit être fait. Il convient de noter que le dernier paramètre de la méthode standard indique s'il faut lier/dissocier pendant la phase de capture d'événement. IE ne prend pas en charge la capture d'événement, il n'y a donc pas de troisième paramètre

.

Remarque : dans la méthode IE, non seulement le nom de la méthode est différent du standard, mais également le type d'événement dans le paramètre doit être ajouté avec on, sinon la liaison sera invalide mais aucune erreur ne sera signalée

6. Gestion des événements multi-navigateurs

//跨浏览器的事件处理器添加方式
var EventUtil = {
  addHandler : function(elem, type, handler){
    if(elem.addEventListener){
      elem.addEventListener(type, handler, false);
    }
    else if(elem.attachEvent){
      elem.attachEvent("on" + type, handler);//添加多个同一类型的handler时，IE方式的规则是最后添加的最先触发
    }
    else{
      if(typeof elem["on" + type] === 'function'){
        var oldHandler = elem["on" + type];
        elem["on" + type] = function(){
          oldHandler();
          handler();
        }
      }
      else{
        elem["on" + type] = handler;//支持添加多个事件处理器
      }
    }
  },

  getEvent : function(event){
    return event ? event : window.event;
  },

  getTarget : function(event){
    return event.target || event.srcElement;
  },

  preventDefault : function(event){
    if(event.preventDefault){
      event.preventDefault();
    }
    else{
      event.returnValue = false;
    }
  },

  removeHandler : function(elem, type, handler){
    if(elem.removeEventListener){
      elem.removeEventListener(type, handler, false);
    }
    else if(elem.detachEvent){
      elem.detachEvent("on" + type, handler);
    }
    else{
      elem["on" + type] = null;//不支持移除单一事件处理器，只能全部移除
    }
  },

  stopPropagation : function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }
    else{
      event.cancelBubble = true;
    }
  },

  getRelatedTarget : function(event){
    if(event.relatedTarget){
      return event.relatedTarget;
    }
    else if(event.toElement && event.type == "mouseout"){
      return event.toElement;
    }
    else if(event.fromElement && event.type == "mouseover"){
      return event.fromElement;
    }
    else{
      return null;
    }
  },

  /*IE8点击左键和中键都是0；FF无法识别中键；Chrome正常*/
  getButton : function(event){//返回0，1，2 - 左，中，右
    if(document.implementation.hasFeature("MouseEvents", "2.0")){
      return event.button;
    }
    else{
      switch(event.button){
        case 0:case 1:case 3:case 5:case 7:
          return 0;
          break;
        case 2:case 6:
          return 2;
          break;
        case 4:
          return 1;
          break;
        default:
          break;
      }
    }
  },

  /*只能检测keypress事件，返回值等于将要显示的字符编码*/
  /*IE和Chrome只有能显示的字符键才触发，FF其它键也能触发，返回值为0*/
  getCharCode : function(event){
    if(typeof event.charCode == "number"){
      return event.charCode;
    }
    else{
      return event.keyCode;
    }
  }
};

Exemple complet

Si une bibliothèque telle que jQuery n'est pas utilisée dans le projet, comment peut-on facilement lier des événements à des éléments et les rendre compatibles avec différents navigateurs ? L'utilitaire simple suivant doit être pris en compte.

var eventUtility = {
  addEvent : function(el, type, fn) {
    if(typeof addEventListener !== "undefined") {
      el.addEventListener(type, fn, false);
    } else if(typeof attachEvent !== "undefined") {
      el.attachEvent("on" + type, fn);
    } else {
      el["on" + type] = fn;
    }
  },

  removeEvent : function(el, type, fn) {
    if(typeof removeEventListener !== "undefined") {
      el.removeEventListener(type, fn, false);
    } else if(typeof detachEvent !== "undefined") {
      el.detachEvent("on" + type, fn);
    } else {
      el["on" + type] = null;
    }
  },

  getTarget : function(event) {
    if(typeof event.target !== "undefined") {
      return event.target;
    } else {
      return event.srcElement;
    }
  },

  preventDefault : function(event) {
    if(typeof event.preventDefault !== "undefined") {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
};

Exemple d'utilisation :

var eventHandler = function(evt) {
  var target = eventUtility.getTarget(evt),
    tagName = target.tagName;

  if(evt.type === "click") {
    if(tagName === "A" || tagName === "BUTTON") {
      alert("You clicked on an A element, and the innerHTML is " + target.innerHTML + "!");
      eventUtility.preventDefault(evt);
    }
  } else if(evt.type === "mouseover" && tagName === "A") {
    alert("mouseovered " + target.innerHTML);
  }

};

eventUtility.addEvent(document, "click", eventHandler);
eventUtility.addEvent(document, "mouseover", eventHandler);

eventUtility.removeEvent(document, "mouseover", eventHandler);