Résumé des méthodes d'écriture de compatibilité JS natives couramment utilisées_compétences Javascript

Résumons quelques choses simples

Remarques : les méthodes suivantes sont toutes encapsulées dans un objet EventUtil et la méthode est directement définie à l'aide de littéraux d'objet. . .

①Ajouter une méthode d'événement

addHandler：function(element,type,handler){
 if(element.addEventListener){//检测是否为DOM2级方法
  element.addEventListener(type, handler, false);
 }else if (element.attachEvent){//检测是否为IE级方法
  element.attachEvent("on" + type, handler);
 } else {//检测是否为DOM0级方法
  element["on" + type] = handler;
 }
}

②Supprimer la méthode d'événement précédemment ajoutée

removeHandler：function(element, type, handler){
  if (element.removeEventListener){
   element.removeEventListener(type, handler, false);
  } else if (element.detachEvent){
   element.detachEvent("on" + type, handler);
  } else {
   element["on" + type] = null;
  }
 }

③Obtenir des événements et des cibles d'objets d'événement

//获取事件对象的兼容性写法
 getEvent: function(event){
  return event ? event : window.event;
 },
 //获取事件对象目标的兼容性写法
 getTarget: function(event){
  return event.target || event.srcElement;
 }

④Comment empêcher la compatibilité des événements par défaut du navigateur

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

⑤ Méthode d'écriture de compatibilité pour éviter les bulles d'événements

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

⑥Les événements mouseover et mouseout incluent uniquement des méthodes pour obtenir les éléments associés

//mouseover和mouseout 事件才包含的获取相关元素的方法
getRelatedTarget: function(event){
 if (event.relatedTarget){
  return event.relatedTarget;
 } else if (event.toElement){
  return event.toElement;
 } else if (event.fromElement){
  return event.fromElement;
 } else {
  return null;
 }
}

⑦Jugement de la molette de la souris

Pour les événements mousedown et mouseup, il y a un attribut bouton dans l'objet événement,
Représente un bouton enfoncé ou relâché. L'attribut du bouton DOM peut avoir les trois valeurs suivantes : 0 représente le bouton principal de la souris, 1 représente le bouton central de la souris
bouton (bouton de la molette de la souris), 2 représente le bouton secondaire de la souris. Dans une configuration standard, le bouton principal de la souris est le bouton gauche de la souris et le bouton secondaire de la souris est
Le bouton est le bouton droit de la souris.
IE8 et les versions précédentes fournissent également l'attribut bouton, mais la valeur de cet attribut est très différente de l'attribut bouton du DOM.
 0 : Indique que le bouton n'est pas enfoncé.
 1 : Indique que le bouton principal de la souris est enfoncé.
 2 : Indique que le bouton de la souris a été enfoncé.
 3 : Indique que les boutons principal et secondaire de la souris sont enfoncés en même temps.
 4 : Indique que le bouton central de la souris est enfoncé.
 5 : Indique que le bouton principal de la souris et le bouton central de la souris sont enfoncés en même temps.
 6 : Indique que le deuxième bouton de la souris et le bouton central de la souris sont enfoncés en même temps.
 7 : Indique que trois boutons de la souris ont été enfoncés simultanément.

getButton: function(event){
 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;
   case 2:
   case 6:
   return 2;
   case 4:
   return 1;
  }
 }
}

⑧Comment obtenir la valeur incrémentale (delta) de la molette de la souris

getWheelDelta: function(event){
 if (event.wheelDelta){
  return (client.engine.opera && client.engine.opera < 9.5 ?
   -event.wheelDelta : event.wheelDelta);
 } else {
  return -event.detail * 40;//firefox中的值为+3表示向上滚，-3表示向下滚
 }
}

⑨Obtenez l'encodage des caractères de manière multi-navigateur

getCharCode: function(event){
 if (typeof event.charCode == "number"){
  return event.charCode;
 } else {
  return event.keyCode;
 }
}

⑩ Accéder aux données dans le presse-papiers

getClipboardText: function(event){
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text");
 }

11. Définissez les données dans le presse-papiers

setClipboardText: function(event, value){
  if (event.clipboardData){
   return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData){
   return window.clipboardData.setData("text", value);
  }
 }

Encapsulez-le puis utilisez-le directement.

Pour des fichiers complets et des styles de réinitialisation CSS et LESS plus basiques, voir : https://github.com/LuckyWinty/resetFile

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.