Penjelasan terperinci tentang penggunaan acara fokus JavaScript, acara tetikus dan kemahiran event

Acara Fokus

Secara amnya, peristiwa ini digunakan bersama dengan kaedah document.hasFocus() dan sifat document.activeElement. Terutamanya termasuk:

kabur: Elemen hilang fokus dan tidak akan menggelegak
DOMFocusIn: Sama seperti fokus acara HTML, ditinggalkan dalam DOM3, gunakan focusin; DOMFocusOut: Sama seperti kabur acara HTML, ditinggalkan dalam DOM3, gunakan focusout; fokus: Elemen mendapat fokus dan tidak menggelembung kembali; focusin: Dapatkan fokus, bersamaan dengan fokus acara HTML, tetapi akan menggelembungkan
fokus keluar: hilang fokus, bersamaan dengan kabur acara HTML; Seperti:

Apabila fokus beralih dari satu elemen ke elemen lain pada halaman, acara berikut akan dicetuskan:

window.onfocus = function () {
  console.log('focus'); //focus
  console.log(document.hasFocus()); //True
}
window.onblur = function () {
  console.log('blur'); //blur
  console.log(document.hasFocus()); //False
}

Salin selepas log masuk

fokus keluar --> kabur -->

Acara tetikus

9 peristiwa tetikus ditakrifkan dalam acara tahap 3 DOM:

Contohnya:

click
dblclick
mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件；
mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件；
mousemove：不能通过键盘触发这个事件；
mouseenter：不冒泡，且光标移动到后代元素上不会触发；
mouseleave：不冒泡，且光标移动到后代元素上不会触发；
mouseover：光标移动到后代元素上会触发；
mouseout：光标移动到后代元素上会触发；

Salin selepas log masuk

Hanya apabila peristiwa turun tetikus dan naik tetikus dibahagikan berturut-turut pada elemen yang sama, peristiwa klik akan dicetuskan hanya apabila peristiwa klik dicetuskan dua kali, peristiwa dblclick akan dicetuskan mengikut urutan.

Tempahan adalah seperti berikut:

div.onmouseover = function() {
  console.log('mouseover'); //在子元素上会触发
}
div.onmouseout = function() {
  console.log('mouseout'); //在子元素上会触发
}
div.onmouseenter = function() {
  console.log('mouseenter'); //在子元素上不会触发
}
div.onmouseleave = function() {
  console.log('mouseleave'); //在子元素上不会触发
}

Salin selepas log masuk

turun tetikus -->

Terdapat pepijat dalam versi sebelum IE8 Dalam acara dwiklik, acara turun tetikus dan klik kedua akan dilangkau

Acara roda

Kawasan pelanggan menyelaraskan kedudukan klienX dan atribut klienY

Contohnya:

Kedudukan koordinat halaman pageX dan pageY;

window.onmousemove = function() {
    clickX = event.clientX;
    clickY = event.clientY;
    var div = document.createElement("img");
    div.src = "hhh.gif"
    div.style.position = "absolute";
    div.style.width = '100px';
    div.style.left = clickX + "px";
    div.style.top = clickY + "px";
    document.body.appendChild(div);
};

Salin selepas log masuk

Kedudukan koordinat halaman ini tidak disokong dalam IE8 dan versi terdahulu Ia boleh dikira dengan menggunakan atribut scrollLeft dan scrollTop dalam document.body dalam mod campuran dan document.documentElement dalam mod standard:

window.onclick = function() {
    clickX = event.pageX;
    clickY = event.pageY;
    var div = document.createElement("img");
    div.src = "ppp.png"
    div.style.position = "absolute";
    div.style.width = '100px';
    div.style.left = clickX + "px";
    div.style.top = clickY + "px";
    document.body.appendChild(div);
};

Salin selepas log masuk

Kedudukan koordinat skrin skrinX dan skrinY;

Melalui atribut ini, anda boleh mendapatkan koordinat berbanding skrin.

if (clickX === undefined) {
  clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if (clickY === undefined) {
  clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};

Salin selepas log masuk

Kunci pengubahsuaian

Kunci pengubahsuaian termasuk Shift, Ctrl, Alt dan Meta (kunci Windows pada Windows, kunci Cmd pada Mac keadaan kunci pengubah suai yang sepadan ialah shiftKey, ctrlKey, altKey dan metaKey , benar jika kekunci yang sepadan ditekan, palsu jika tidak. Seperti:

Elemen berkaitan

var array = [];
var timing = setTimeout(showArray, 100);

window.onclick = function() {
  if (event.shiftKey) {
    array.push("shift");
  };
  if (event.ctrlKey) {
    array.push("ctrl");
  };
  if (event.altKey) {
    array.push("alt");
  };
  if (event.metaKey) {
    array.push("meta");
  };
};

function showArray() {
  var str = array.toString();
  var newP = document.createElement("p");
  newP.appendChild(document.createTextNode(str));
  document.body.appendChild(newP);
  timing = setTimeout(showArray, 1000);
}

Salin selepas log masuk

acara.berkaitanSasaran dan acara.sasaran;

Atribut relatedTarget menyediakan maklumat tentang elemen berkaitan. Atribut ini hanya mengandungi nilai untuk acara alih tetikus dan keluar tetikus; untuk acara lain, nilai adalah nol versi sebelum IE8 tidak menyokong atribut relatedTarget Apabila peristiwa alih tetikus dicetuskan, elemen yang berkaitan disimpan dalam atribut fromElement IE ; apabila acara keluar tetikus dicetuskan, elemen yang berkaitan disimpan dalam atribut toElement IE.

Contohnya:

var dot = document.getElementById("dot");
dot.onmouseout = function (){
  console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName);
};

Salin selepas log masuk

Butang Tetikus

atribut butang

function getRelatedTarget() {
  if (event.ralatedTarget) {
    return event.relatedTarget;
  } else if (event.toElement) {
    return event.toElement;
  } else if (event.fromElement) {
    return event.fromElement;
  } else {
    return null;
  }
}

Salin selepas log masuk

Atribut event.button DOM mempunyai tiga nilai: 0 untuk butang tetikus utama, 1 untuk butang tengah tetikus dan 2 untuk butang tetikus kedua. Dalam tetapan biasa, butang tetikus utama ialah butang tetikus kiri, butang tetikus kedua ialah butang tetikus kanan.

IE8 dan versi sebelumnya juga menyediakan atribut butang, tetapi nilai atribut ini sangat berbeza daripada atribut butang DOM:

0: Tiada butang tetikus ditekan; 1: Butang tetikus utama; 2: Butang tetikus kedua; 3: Tekan butang tetikus utama dan kedua secara serentak; 4: Butang tengah tetikus; 5: Tekan butang tetikus utama dan butang tengah tetikus pada masa yang sama

6: Tekan butang kedua tetikus dan butang tengah tetikus pada masa yang sama

7: Tekan tiga butang tetikus serentak

Versi yang serasi:

Selain itu, jika anda ingin menyekat butang kanan tetikus, anda harus menggunakan:

Acara ini ditakrifkan oleh HTML5 dan akan dibincangkan kemudian

Lagi maklumat acara

function getButton() {
  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

atribut terperinci

document.oncontextmenu = function(event) {
  // if (window.event) {
  //   event = window.event;
  // }
  // try {
  //   var the = event.srcElement;
  //   if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
  //     return false;
  //   }
  //   return true;
  // } catch (e) {
  //   return false;
  // }
  return false;
}

Salin selepas log masuk

Untuk acara tetikus, butiran mengandungi nilai yang menunjukkan bilangan klik yang berlaku pada kedudukan tertentu (satu tetikus turun dan satu tetikus naik Nombor mula dikira dari 1. Jika kedudukan telah beralih antara tetikus turun dan tetikus atas , butiran akan ditetapkan semula). kepada 0 dan jika selang klik terlalu panjang, ia juga akan ditetapkan semula kepada 0.

Acara roda tetikus

acara roda tetikus dan atribut wheelDelta

Apabila pengguna menatal halaman secara menegak, roda tetikus akan dicetuskan Atribut wheelDelta dalam objek acara bermakna apabila pengguna melancarkan roda ke hadapan, wheelDelta ialah gandaan 120 apabila pengguna melancarkan roda ke belakang. wheelDelta ialah -120. Seperti:

另外，在Opera 9.5之前的版本中，wheelDelta值的正负号是颠倒的。

此外，Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数，向后滚动，这个属性的值是3的倍数。

通用版：

function getWheelDelta() {
  if (event.wheelDelta) {
    return (client.engine.opera && client.engine.opera < 9.5 &#63; -event.wheelDelta : event.wheelDelta);
  } else {
    return -event.detail * 40;
  };
}

Salin selepas log masuk

触摸设备

iOS和Android设备中：

不支持dblclick；
轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件；
mousemove事件也会触发mouseover和mouseout事件；
两个手指操作会触发mousewheel和scroll；

无障碍性问题

使用click事件执行代码；

不要使用onmouseover向用户显示新的信息；
不要使用dblclick执行重要的操作；