JavaScriptのフォーカスイベント、マウスイベント、スクロールホイールイベントの使い方の詳しい説明_JavaScriptスキル

フォーカスイベント

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

ぼかし: 要素はフォーカスを失い、バブルしません。 DOMFocusIn: HTML イベント フォーカスと同じですが、DOM3 では放棄され、
を使用します。 DOMFocusOut: HTML イベント ブラーと同じですが、DOM3 では廃止され、focusout
を使用します。 focus: 要素はフォーカスを取得しますが、バブルバックしません。 focusin: フォーカスを取得します。HTML イベントのフォーカスと同等ですが、バブルします。 focusout: フォーカスを失い、HTML イベントブラー
に相当します。 例:

フォーカスがページ上のある要素から別の要素に移動すると、次のイベントがトリガーされます:

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

フォーカスアウト --> フォーカスイン --> DOMFocusOut --> DOMFocusIn

マウスイベント

9 個のマウス イベントが DOM レベル 3 イベントで定義されています:

例:

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

同じ要素上でマウスダウン イベントとマウスアップ イベントが連続して分割された場合にのみ、クリック イベントがトリガーされます。クリック イベントが 2 回トリガーされた場合にのみ、dblclick イベントが順番にトリガーされます。

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

順序は次のとおりです:

マウスダウン --> マウスダウン --> dblclick

IE8 より前のバージョンでは、ダブルクリック イベントで 2 回目のマウスダウン イベントとクリック イベントがスキップされます。

ホイールイベント

クライアント領域の座標位置 clientX および clientY 属性

例:

ページ座標の位置 pageX と 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);
};

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

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

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

この属性を通じて、画面を基準とした座標を取得できます。

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

修飾キー

修飾キーには Shift、Ctrl、Alt、Meta が含まれます (Windows では Windows キー、Mac では Cmd キー)。これらの属性にはブール値が含まれます。対応するキーが押された場合は false、それ以外の場合は false。例:

関連要素

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

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

例:

例:

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

マウス ボタン

ボタン属性

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

DOM のevent.button 属性には 3 つの値があります: 0 は主マウス ボタン、1 はマウスの中ボタン、2 は副マウス ボタンです。通常の設定では、主マウス ボタンはマウスの左ボタンであり、副マウス ボタンはマウスの右ボタンです。

IE8 およびそれ以前のバージョンでもボタン属性が提供されていますが、この属性の値は DOM ボタン属性とは大きく異なります。

0: マウスボタンが押されていません。

1: メインマウスボタン ​​

2: 二次マウス ボタン

3: マウスの主ボタンと副ボタンを同時に押します。

4: マウスの中ボタン

5: マウスのメイン ボタンとマウスの中ボタンを同時に押します。

6: マウスの 2 番目のボタンと中央のボタンを同時に押します。

7: 3 つのマウス ボタンを同時に押します


互換性のあるバージョン:




さらに、マウスの右ボタンをブロックしたい場合は、次を使用する必要があります:

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

このイベントは HTML5 で定義されており、後で説明します

イベント情報をもっと見る

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

詳細属性

マウス イベントの場合、詳細には、特定の位置で発生したクリック数 (マウスダウン 1 回とマウスアップ 1 回) を示す値が含まれます。数値は 1 から数え始めます。マウスダウンとマウスアップの間で位置が移動した場合、詳細はリセットされます。クリック間隔が長すぎる場合も0にリセットされます。

マウスホイールイベント

マウスホイールイベントとwheelDelta属性

ユーザーがページを垂直にスクロールすると、イベント オブジェクトの WheelDelta 属性がトリガーされ、ユーザーがホイールを前方に回転させると、wheelDelta は 120 の倍数になります。 WheelDelta は -120 の倍数です。例:

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

触摸设备

iOS和Android设备中：

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

无障碍性问题

使用click事件执行代码；

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