Événements multi-navigateurs en JavaScript (tutoriel graphique)

Tout d'abord, il convient de mentionner qu'il existe des problèmes de compatibilité du navigateur avec des méthodes ou des objets tels que le traitement des événements, les objets d'événement et l'empêchement de la propagation des événements. Au cours du processus de développement, il est préférable d'écrire un traitement d'événements universel. Eh bien, examinons ensuite les méthodes de base des opérations d'événements entre navigateurs en JavaScript

Lier les événements

EU.addHandler = function(element,type,handler){
  //DOM2级事件处理，IE9也支持
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }
  else if(element.attachEvent){
    //type加'on'
    //IE9也可以这样绑定
    element.attachEvent('on' + type,handler);
  }
  //DOM0级事件处理步，事件流也是冒泡
  else{
    element['on' + type] = handler;
  }
};

Dissocier les événements. Fondamentalement identique au traitement des événements de liaison, il y a une remarque :
Le gestionnaire transmis doit être le même que celui transmis lors de la liaison de l'événement (pointant vers la même fonction)

EU.removeHandler = function(element,type,handler){
  if(element.removeEventListener){
    element.removeEventListener(type,handler);
  }
  else if(element.attachEvent){
    element.detachEvent('on' + type,handler);
  }
  else{
    //属性置空就可以
    element['on' + type] = null;
  }
};

Événement d'ajout de navigateur

  function addEvent(obj,type,fn){
    if(obj.addEventListener){
      obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){//IE
      obj.attchEvent('on'+type,fn);
    }
  }

Événement de suppression multi-navigateur

function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
    obj.removeEventListener(type,fn,false);
  }else if(obj.detachEvent){//兼容IE
    obj.detachEvent('on'+type,fn);
  }
}

Comportement par défaut du blocage multi-navigateur

function preDef(ev){
    var e = ev || window.event;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue =false;
    }
  }

Obtenez l'objet cible dans tous les navigateurs

function getTarget(ev){
  if(ev.target){//w3c
    return ev.target;
  }else if(window.event.srcElement){//IE
    return window.event.srcElement;
  }
}

Obtenez la position de la barre de défilement dans tous les navigateurs

//跨浏览器获取滚动条位置，sp == scroll position
  function getSP(){
    return{
      top: document.documentElement.scrollTop || document.body.scrollTop,
      left : document.documentElement.scrollLeft || document.body.scrollLeft;
    }
  }

Obtenez la taille de la fenêtre visuelle dans tous les navigateurs

     function getWindow () {
      if(typeof window.innerWidth !='undefined') {
        return{
          width : window.innerWidth,
          height : window.innerHeight
        }

      } else{
        return {
          width : document.documentElement.clientWidth,
          height : document.documentElement.clientHeight
        }
      }
    },

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Analyse détaillée et réponses au principe de fonctionnement de JavaScript

À propos d'Eclipse pour supprimer js (JavaScript ) erreurs de vérification (réponse détaillée)

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

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!