JavaScriptイベントタイプのフォーカス・マウス・ホイールイベントの詳しい解説_JavaScriptスキル

この記事では、JavaScript イベントの「イベント タイプ」にある「フォーカス、マウス、ホイール イベント」の要点を整理し、参考として共有します。具体的な内容は次のとおりです。

1. イベントに焦点を当てる

通常、これらのイベントは document.hasFocus() メソッドおよび document.activeElement プロパティと組み合わせて使用​​されます。主に以下が含まれます:

• ぼかし: 要素はフォーカスを失い、バブルしません。
DOMFocusIn: HTML イベント フォーカスと同じですが、DOM3 では放棄され、
• を使用します。
DOMFocusOut: HTML イベント ブラーと同じですが、DOM3 では廃止され、
• を使用します。
focus: 要素はフォーカスを取得しますが、バブルバックしません。
• focusin: フォーカスを取得します。これは HTML イベントのフォーカスと同等ですが、
• focusout: HTML イベントブラーと同等、フォーカスを失います。
• 例:
  
フォーカスがページ上のある要素から別の要素に移動すると、次のイベントがトリガーされます:

フォーカスアウト --> フォーカス --> DOMFocusIn

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. マウスイベント 9 個のマウス イベントが DOM レベル 3 イベントで定義されています:

クリック

• dblclick
• mousedown: ユーザーがマウス ボタンを押すとトリガーされます。このイベントはキーボードからはトリガーできません。 mouseup: ユーザーがマウス ボタンを放したときにトリガーされます。このイベントはキーボードからはトリガーできません。
• mousemove: このイベントは、 からはトリガーできません。
• mouseenter: バブルは発生せず、カーソルが子孫要素に移動してもトリガーされません。 mouseleave: バブルは発生せず、カーソルが子孫要素に移動してもトリガーされません。
• mouseover: カーソルが子孫要素に移動するとトリガーされます。 mouseout: カーソルが子孫要素に移動するとトリガーされます。
• 例:
• 同じ要素上でマウスダウン イベントとマウスアップ イベントが連続して分割された場合にのみ、クリック イベントがトリガーされます。クリック イベントが 2 回トリガーされた場合にのみ、dblclick イベントが順番にトリガーされます。 順序は次のとおりです:
• マウスダウン --> マウスダウン --> dblclick IE8 より前のバージョンでは、ダブルクリック イベントで 2 回目のマウスダウン イベントとクリック イベントがスキップされます。
3. ローラーイベント
• 1. クライアント領域の座標位置 clientX および clientY 属性 例:
  

2. ページ座標位置 pageX と pageY;

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

このページの座標位置は、IE8 以前のバージョンではサポートされていません。混合モードの document.body および標準モードの document.documentElement のscrollLeft属性とscrollTop属性を使用して計算できます。

3. スクリーン座標の位置 screenX と screenY;

この属性を通じて、画面を基準とした座標を取得できます。 4. 変更キー 修飾キーには Shift、Ctrl、Alt、Meta が含まれます (Windows では Windows キー、Mac では Cmd キー)。これらの属性にはブール値が含まれます。対応するキーが押された場合は false、それ以外の場合は false。例:

5. 関連要素

event.personalTarget

および

event.target

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

relationTarget 属性は、関連する要素に関する情報を提供します。この属性には、mouseover イベントと Mouseout イベントの値のみが含まれます。他のイベントの値は null です。IE8 より前のバージョンでは、mouseover イベントがトリガーされると、関連する要素が IE の fromElement 属性に保存されます。 ; Mouseout イベントがトリガーされると、関連する要素が IE の toElement 属性に格納されます。

例:

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

例:

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

四、鼠标按钮

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执行重要的操作；

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