Maison > interface Web > js tutoriel > Résumé des méthodes d'écriture de compatibilité JS natives couramment utilisées_compétences Javascript

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

WBOY
Libérer: 2016-05-16 15:03:33
original
1909 Les gens l'ont consulté

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;
 }
}
Copier après la connexion

②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;
  }
 }
Copier après la connexion

③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;
 }
Copier après la connexion

④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;
  }
 }
Copier après la connexion

⑤ 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;
  }
 }
Copier après la connexion

⑥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;
 }
}
Copier après la connexion

⑦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;
  }
 }
}
Copier après la connexion

⑧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 &#63;
   -event.wheelDelta : event.wheelDelta);
 } else {
  return -event.detail * 40;//firefox中的值为+3表示向上滚,-3表示向下滚
 }
}
Copier après la connexion

⑨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;
 }
}
Copier après la connexion

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

getClipboardText: function(event){
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text");
 }
Copier après la connexion

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);
  }
 }
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal