Ringkasan kaedah penulisan keserasian JS asli yang biasa digunakan

Ringkasan kaedah penulisan keserasian JS asli yang biasa digunakan_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:03:33

asal

1908 orang telah melayarinya

Mari kita ringkaskan beberapa perkara mudah

Catatan: Kaedah berikut semuanya dibungkus dalam objek EventUtil dan kaedah ditakrifkan secara langsung menggunakan literal objek. . .

①Tambah kaedah acara

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

Salin selepas log masuk

②Alih keluar kaedah acara yang ditambahkan sebelum ini

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

Salin selepas log masuk

③Dapatkan acara dan sasaran objek acara

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

Salin selepas log masuk

④Cara menghalang keserasian acara lalai penyemak imbas

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

Salin selepas log masuk

⑤ Kaedah penulisan keserasian untuk mengelakkan peristiwa menggelegak

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

Salin selepas log masuk

⑥Peristiwa alih tetikus dan keluar tetikus hanya termasuk kaedah untuk mendapatkan elemen berkaitan

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

Salin selepas log masuk

⑦Pertimbangan roda tetikus

Untuk acara turun tetikus dan naik tetikus, terdapat atribut butang dalam objek acara,
Mewakili butang yang ditekan atau dilepaskan. Atribut butang DOM mungkin mempunyai tiga nilai berikut: 0 mewakili butang tetikus utama, 1 mewakili tetikus tengah
butang (butang roda tetikus), 2 mewakili butang tetikus kedua. Dalam persediaan biasa, butang tetikus utama ialah butang tetikus kiri dan butang tetikus kedua ialah
Butang adalah butang kanan tetikus.
IE8 dan versi sebelumnya juga menyediakan atribut butang, tetapi nilai atribut ini sangat berbeza daripada atribut butang DOM.
 0: Menunjukkan bahawa butang tidak ditekan.
 1: Menunjukkan butang tetikus utama ditekan.
 2: Menunjukkan bahawa butang tetikus telah ditekan.
 3: Menunjukkan bahawa butang tetikus primer dan sekunder ditekan pada masa yang sama.
 4: Menunjukkan bahawa butang tengah tetikus ditekan.
 5: Menunjukkan bahawa butang tetikus utama dan butang tengah tetikus ditekan pada masa yang sama.
 6: Menunjukkan bahawa butang kedua tetikus dan butang tengah tetikus ditekan pada masa yang sama.
 7: Menunjukkan tiga butang tetikus ditekan serentak.

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

Salin selepas log masuk

⑧Bagaimana untuk mendapatkan nilai tambahan (delta) roda tetikus

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

Salin selepas log masuk

⑨Dapatkan pengekodan aksara dengan cara merentas pelayar

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

Salin selepas log masuk

⑩ Akses data dalam papan keratan

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

Salin selepas log masuk

11 Tetapkan data dalam papan keratan

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

Salin selepas log masuk

Merangkuminya dan kemudian menggunakannya terus.

Untuk fail lengkap dan gaya tetapan semula CSS yang lebih asas dan KURANG, lihat: https://github.com/LuckyWinty/resetFile

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.