Ringkasan kaedah penulisan keserasian JS asli yang biasa digunakan_kemahiran javascript

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

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

③Dapatkan acara dan sasaran objek acara

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

④Cara menghalang keserasian acara lalai penyemak imbas

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

⑤ Kaedah penulisan keserasian untuk mengelakkan peristiwa menggelegak

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

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

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

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

⑨Dapatkan pengekodan aksara dengan cara merentas pelayar

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

⑩ Akses data dalam papan keratan

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

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

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.