Événements multi-navigateurs en JavaScript (tutoriel graphique)-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-21 13:43:28

original

1120 Les gens l'ont consulté

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加&#39;on&#39;
    //IE9也可以这样绑定
    element.attachEvent(&#39;on&#39; + type,handler);
  }
  //DOM0级事件处理步，事件流也是冒泡
  else{
    element[&#39;on&#39; + type] = handler;
  }
};

Copier après la connexion

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(&#39;on&#39; + type,handler);
  }
  else{
    //属性置空就可以
    element[&#39;on&#39; + type] = null;
  }
};

Copier après la connexion

É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(&#39;on&#39;+type,fn);
    }
  }

Copier après la connexion

É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(&#39;on&#39;+type,fn);
  }
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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

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

Copier après la connexion

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!