Penjelasan terperinci tentang acara fokus, tetikus dan roda dalam jenis acara JavaScript_kemahiran javascript

Artikel ini mengatur perkara utama "acara fokus, tetikus dan roda" di bawah "Jenis Acara" dalam acara JavaScript dan berkongsinya dengan anda untuk rujukan anda. Kandungan khusus adalah seperti berikut

1. Tumpuan acara

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 fokus keluar; fokus: Elemen mendapat fokus dan tidak akan menggelembung kembali
• fokuskan: Dapatkan fokus, yang setara dengan fokus acara HTML, tetapi akan menggelembung;
• fokus keluar: hilang fokus, bersamaan dengan kabur acara HTML
• Contohnya:
  
Apabila fokus beralih dari satu elemen ke elemen lain pada halaman, acara berikut akan dicetuskan:

fokus keluar --> kabur -->

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

2. Acara tetikus

9 peristiwa tetikus ditakrifkan dalam acara tahap 3 DOM:

klik

dblclick

• turun tetikus: Dicetuskan apabila pengguna menekan mana-mana butang tetikus Peristiwa ini tidak boleh dicetuskan melalui papan kekunci
• mouseup: tercetus apabila pengguna melepaskan butang tetikus Peristiwa ini tidak boleh dicetuskan melalui papan kekunci
• mousemove: Acara ini tidak boleh dicetuskan melalui papan kekunci;
• masuk tetikus: tidak menggelembung, dan tidak akan dicetuskan apabila kursor bergerak ke elemen turunan
• mouseleave: tidak menggelembung, dan tidak akan dicetuskan apabila kursor bergerak ke elemen turunan
• alih tetikus: Dicetuskan apabila kursor bergerak ke elemen keturunan
• mouseout: Dicetuskan apabila kursor bergerak ke elemen turunan; Contohnya:
• 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:
• turun tetikus --> Terdapat pepijat dalam versi sebelum IE8 Dalam acara dwiklik, acara turun tetikus dan klik kedua akan dilangkau
  3. Acara penggelek

1. Kawasan pelanggan menyelaraskan kedudukan klienX dan atribut klienY

Contohnya:

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

2. Halaman menyelaraskan kedudukan halamanX dan halamanY;

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:

3. Kedudukan koordinat skrin skrinX dan skrinY;

Melalui atribut ini, anda boleh mendapatkan koordinat berbanding skrin. 4. Kekunci 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:

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

5. Elemen berkaitan

event.relatedTarget

dan

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

event.target;

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.

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

Contohnya:

Contohnya:

四、鼠标按钮

1、button属性

DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。

IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：

• 0：没有按下鼠标按钮；
  
• 1：主鼠标按钮；
  
• 2：次鼠标按钮；
  
• 3：同时按下主鼠标按钮和次鼠标按钮；
  
• 4：中间鼠标按钮；
  
• 5：同时按下主鼠标按钮和中间鼠标按钮；
  
• 6：同时按下次鼠标按钮和中间鼠标按钮；
  
• 7：同时按下三个鼠标按钮
  

兼容版：

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

另外，如果要屏蔽鼠标右键，应该使用：

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

这个事件是HTML5定义的，以后再讨论

2、更多的事件信息

detail属性

对于鼠标事件来说，detail包含了一个数值，表示在给定位置上发生了多少次单击（一次mousedown和一次mouseup），次数从1开始计数，如果mousedown和mouseup之间移动了位置，detail会被重置0，如果单击间隔太长也会被重置为0.

3、鼠标滚轮事件

mousewheel事件和wheelDelta属性

在垂直放向上滚动页面时，就会触发mousewheel，event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时，wheelDelta是120的倍数；当向后滚动滚轮时，wheelDelta是-120的倍数。如：

var clientHeight = document.documentElement.clientHeight;
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  divs[i].style.height = clientHeight + "px";
};

window.onmousewheel = function () {
  if (event.wheelDelta <= -120) {
    window.scrollBy(0,clientHeight);
  }else if(event.wheelDelta >= 120){
    window.scrollBy(0,-clientHeight);
  };
}

另外，在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;
  };
}

4、触摸设备

iOS和Android设备中：

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

5、无障碍性问题

• 使用click事件执行代码；
• 不要使用onmouseover向用户显示新的信息；
• 不要使用dblclick执行重要的操作；

以上就是本文的全部内容，希望对大家的学习有所帮助。