Zusammenfassung häufig verwendeter nativer JS-Kompatibilitätsschreibmethoden_Javascript-Fähigkeiten

Lassen Sie uns einige einfache Dinge zusammenfassen

Bemerkungen: Die folgenden Methoden sind alle in ein EventUtil-Objekt eingeschlossen und die Methode wird direkt mithilfe von Objektliteralen definiert. . .

①Ereignismethode hinzufügen

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

②Entfernen Sie die zuvor hinzugefügte Ereignismethode

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

③Ereignisse und Ereignisobjektziele abrufen

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

④So verhindern Sie die Kompatibilität von Browser-Standardereignissen

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

⑤ Kompatibilitätsschreibmethode, um das Sprudeln von Ereignissen zu verhindern

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

⑥Die Mouseover- und Mouseout-Ereignisse umfassen nur Methoden zum Abrufen verwandter Elemente

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

⑦Mausrad-Beurteilung

Für Mousedown- und Mouseup-Ereignisse gibt es ein Schaltflächenattribut im Ereignisobjekt,
Stellt eine Taste dar, die gedrückt oder losgelassen wird. Das DOM-Schaltflächenattribut kann die folgenden drei Werte haben: 0 steht für die Hauptmaustaste, 1 steht für die mittlere Maus
(Mausradtaste), 2 stellt die sekundäre Maustaste dar. In einem normalen Setup ist die primäre Maustaste die linke Maustaste und die sekundäre Maustaste ist
Die Schaltfläche ist die rechte Maustaste.
IE8 und frühere Versionen bieten ebenfalls das Button-Attribut, der Wert dieses Attributs unterscheidet sich jedoch stark vom Button-Attribut des DOM.
 0: Zeigt an, dass die Taste nicht gedrückt ist.
 1: Zeigt an, dass die primäre Maustaste gedrückt ist.
 2: Zeigt an, dass die Maustaste gedrückt wurde.
 3: Zeigt an, dass die primäre und sekundäre Maustaste gleichzeitig gedrückt werden.
 4: Zeigt an, dass die mittlere Maustaste gedrückt ist.
 5: Zeigt an, dass die Hauptmaustaste und die mittlere Maustaste gleichzeitig gedrückt werden.
 6: Zeigt an, dass die zweite Maustaste und die mittlere Maustaste gleichzeitig gedrückt werden.
 7: Zeigt an, dass drei Maustasten gleichzeitig gedrückt wurden.

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

⑧So erhalten Sie den Inkrementalwert (Delta) des Mausrads

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表示向下滚
 }
}

⑨Erhalten Sie die Zeichenkodierung browserübergreifend

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

⑩ Zugriffsdaten in der Zwischenablage

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

11. Legen Sie die Daten in der Zwischenablage fest

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

Verkapseln Sie es und verwenden Sie es dann direkt.

Vollständige Dateien und grundlegendere CSS- und LESS-Reset-Stile finden Sie unter: https://github.com/LuckyWinty/resetFile

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.