ジャバスクリプト：マウスイベント

原文章：https://wangdoc.com/javascript/index.html

マウスイベント

マウスイベントのタイプ

マウスイベントは、マウス、継承された関連するイベントを指すMouseEventインターフェース。主に以下の内の特定のイベント。

• click：マウスは、（通常、メインボタンを押すことによって）が押されたときにトリガ。
• dblclick：同じ要素上でマウスをダブルクリックしたときにトリガされます。
• mousedown：マウスボタンが押されたときにトリガされます。
• mouseup：トリガーボタンが押され、マウスを離します。
• mousemove：マウスがノード内に移動するときにトリガ。マウスが移動し続ける場合は、イベントが継続的にトリガされます。パフォーマンスの問題を回避するために、そのようなだけ時間をかけて一度に実行限定されるとリスニングイベント、いくつかの制限された機能を行うことをお勧めします。
• mouseenter：マウストリガノードに入ると、サブノードが（後でこれについて）このイベントをトリガしない入ります。
• mouseover：マウストリガノードに入ると、サブノードが再び（後でこれについて）このイベントをトリガする入ります。
• mouseout：マウスの葉は、トリガー、親を残すこと（後にさらにこの上）このイベントをトリガーするAノード。
• mouseleave：マウスの葉は、トリガー、親を残すこと（後にさらにこの上）このイベントをトリガしませんAノード。
• contextmenuマウスの右ボタンを押すことによってトリガされると、「コンテキストメニューキー」トリガー、またはを押します（コンテキストメニューが前に表示されます）：
• wheel：ときにマウスホイールをスクロールすると、イベント継承されたトリガするためWheelEventのインターフェイスを。

clickイベント手段は、ユーザーが同じ位置で完了することをmousedown行動して、完了mouseupアクションを。したがって、順序は、トリガされmousedown、最初のトリガmouseupトリガ次にclick、最終トリガー。

dblclickイベントはでありmousedown、mouseup、clickトリガ後。

mouseoverイベントとmouseenterマウスがノードに入ったときにイベントがトリガされます。違いがあることであるmouseenterノードの内部にマウスを移動する限り、イベントは一度だけトリガーされるmouseoverイベントは、子ノードに複数回トリガされます。

/* HTML 代码如下
 <ul>
   <li>item 1</li>
   <li>item 2</li>
  <li>item 3</li>
 </ul>
*/

var ul = document.querySelector('ul');

// 进入 ul 节点以后，mouseenter 事件只会触发一次
// 以后只要鼠标在节点内移动，都不会再触发这个事件
// event.target 是 ul 节点
ul.addEventListener('mouseenter', function (event) {
  event.target.style.color = 'purple';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

// 进入 ul 节点以后，只要在子节点上移动，mouseover 事件会触发多次
// event.target 是 li 节点
ul.addEventListener('mouseover', function (event) {
  event.target.style.color = 'orange';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

上記のコード、親ノードの子を入力して、トリガされませんmouseenterイベントが、しかし、トリガmouseoverイベントを。

mouseoutイベントとmouseleaveマウスがノードを去るときのイベントがトリガされます。違いは、親要素内の子要素を離れるとき、ということであるmouseleaveイベントがトリガさせず、mouseoutイベントトリガ。

/* HTML 代码如下
 <ul>
   <li>item 1</li>
   <li>item 2</li>
  <li>item 3</li>
 </ul>
*/

var ul = document.querySelector('ul');

// 先进入 ul 节点，然后在节点内部移动，不会触发 mouseleave 事件
// 只有离开 ul 节点时，触发一次 mouseleave
// event.target 是 ul 节点
ul.addEventListener('mouseleave', function (event) {
  event.target.style.color = 'purple';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

// 先进入 ul 节点，然后在节点内部移动，mouseout 事件会触发多次
// event.target 是 li 节点
ul.addEventListener('mouseout', function (event) {
  event.target.style.color = 'orange';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

コードは、上記の親の左の子ノード内で、トリガされませんmouseleaveイベントが、しかし、トリガmouseoutイベントを。

MouseEventのインターフェイスの概要

MouseEventインタフェースは、マウスクリック（クリック）に関連したイベント、ダブルクリック（DBLCLICK）、マウスボタン（のmouseup）をリリースプレスマウスボタン（マウスダウン）及び他の動きを表し、イベントオブジェクトが生成されるMouseEventインスタンス。また、イベントはまた、ホイールイベントやドラッグMouseEventのインスタンスを。

MouseEventインターフェイスを拡張しEvent、そのため、インタフェースを持っているEventすべての属性とメソッドを。また、独自のプロパティとメソッドを持っています。

ネイティブブラウザが提供してMouseEvent新しい作成するためのコンストラクタMouseEventインスタンスを。

var event = new MouseEvent(type, options);

MouseEventコンストラクタは、2つのパラメータを取ります。最初の引数は、イベントの名前を表す文字列であり、イベント2番目のパラメータは、構成オブジェクトであり、パラメータはオプションです。添加にEventインターフェースの構成属性の例として、オブジェクトは次のプロパティを設定することができ、すべてのプロパティはオプションです。

• screenX：画面の水平方向の位置（ピクセル単位）に対する相対値、マウスは、デフォルト値は、プロパティがマウスを移動しないことを条件とする、0です。
• screenY：値は、画面のピクセル単位で垂直に対してマウスの位置、および他のscreenX同様。
• clientX：ウィンドウの水平方向の位置（ピクセル単位）に対する相対値、マウスは、デフォルト値は、プロパティがマウスを移動しないことを条件とする、0です。
• clientY：値は、ウィンドウの（ピクセルで）垂直にマウスの位置と他のclientX同じ。
• ctrlKey：ブール値かどうか、Ctrlキー、デフォルト値を押しながらfalse。
• shiftKey：ブールShiftキーを押しながらかどうかを値、デフォルト値false。
• altKey：ブール値、デフォルト値を押しながらAltキーかどうかfalse。
• metaKey：ブール値、デフォルト値を押しながらのMetaキーかどうかfalse。
• button：マウスボタンを表す値を、押下されると、デフォルト値0主キーを表す（通常はマウスの左ボタン）が押下されたか、または現在のイベントは、属性が定義されていない、1二次キー（通常はマウスの中央ボタン）を押すを表し、2二次キー（通常はマウスの右ボタン）を押すことを意味します。
• buttons：マウスボタンを押した値を、デフォルトの3ビットバイナリ値が0（どのキーが押されていません）。1（バイナリ001）（通常は左）主キーが押されていることを示し、 2（バイナリの010）二次キー（通常は右側）に押されていることを示し、 4（バイナリの100）二次キー（通常は中央のボタン）が押され表します。したがって、リターンた場合3（バイナリは、011左右のボタンを押しながら）と言います。
• relatedTargetデフォルトでは、イベントに関連するノードを表すノードオブジェクトnull。mouseenterそしてmouseoverイベントは、要素ノードマウスはちょうど左ことを示す場合、mouseoutおよびmouseleaveイベントは、マウスが要素ノードに入っていることを示す場合。

ここでは一例です。

function simulateClick() {
  var event = new MouseEvent('click', {
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox');
  cb.dispatchEvent(event);
}

上記のコードは、マウスクリックイベントを生成し、イベントをトリガします。

インタフェースの属性の例のMouseEvent

MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、MouseEvent.shiftKey

MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、MouseEvent.shiftKeyフォープロパティは、イベントが発生したときにプレス対応するキーかどうか、を示すブール値を返します。彼らは、読み取り専用属性です。

• altKeyプロパティ：Altキー
• ctrlKeyプロパティ：Ctrlキー
• metaKeyプロパティ：Metaキーは、（Macのキーボードは、4本の花で、Windowsのキーボードは、Windowsキーです）
• shiftKeyプロパティ：Shiftキー

// HTML 代码如下
// <body onclick="showKey(event)">
function showKey(e) {
  console.log('ALT key pressed: ' + e.altKey);
  console.log('CTRL key pressed: ' + e.ctrlKey);
  console.log('META key pressed: ' + e.metaKey);
  console.log('SHIFT key pressed: ' + e.shiftKey);
}

上記のコードでは、ページをクリックすると、対応するキーを押した場合に出力されます。

MouseEvent.button、MouseEvent.buttons

MouseEvent.buttonプロパティは、イベントが発生したときに、マウスを押したキーを示す値を返します。このプロパティは読み取り専用です。

• 0：プレス主キー（通常は左）、またはイベントの属性（初期化されませんmousemoveイベント）。
• 1：プレスセカンダリキー（典型的にはボタンやホイールボタン）。
• 2：押しボタンの横（通常は右）。

// HTML 代码为
// <button onmouseup="whichButton(event)">点击</button>
var whichButton = function (e) {
  switch (e.button) {
    case 0:
      console.log('Left button clicked.');
      break;
    case 1:
      console.log('Middle button clicked.');
      break;
    case 2:
      console.log('Right button clicked.');
      break;
    default:
      console.log('Unexpected code: ' + e.button);
  }
}

MouseEvent.buttonsプロパティは、キープレスを表す3ビットの値を返します。マウスのボタンに複数の押下を処理するために使用されます。このプロパティは読み取り専用です。

• 1：のためのバイナリ001（小数点以下1）は、左のボタンを押すことを示しています。
• 2：バイナリシステム010（小数点2）、右を押しを表します。
• 4：バイナリシステム100（小数点以下4）は、ボタンやホイールボタンを押すことを示しています。

いくつかのキーは、各キーが押されたときに対応するビット値が存在するであろう。例えば、3（011バイナリ）左右、リターンを押しながら。

MouseEvent.clientX、MouseEvent.clientY

MouseEvent.clientXプロパティは、（ピクセル単位）ブラウザウィンドウの左上隅の位置の水平座標にマウスを相対的に返し、MouseEvent.clientYプロパティが垂直座標返します。この2つのプロパティは、読み取り専用属性です。

// HTML 代码为
// <body onmousedown="showCoords(event)">
function showCoords(evt){
  console.log(
    'clientX value: ' + evt.clientX + '\n' +
    'clientY value: ' + evt.clientY + '\n'
  );
}

この2つのプロパティは、別名を持っているMouseEvent.xとMouseEvent.y。

MouseEvent.movementX、MouseEvent.movementY

MouseEvent.movementXプロパティは、現在の位置を返しmousemove（ピクセル単位）イベントとの間の水平距離。以下の計算式に等しい値、。

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX

MouseEvent.movementYプロパティは、上の現在位置を返しmousemoveイベント間の垂直距離（ピクセル単位）を表しています。以下の計算式に等しい値、。

currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。

この2つのプロパティは、読み取り専用属性です。

MouseEvent.screenX、MouseEvent.screenY

MouseEvent.screenXプロパティは、（ピクセル単位）、画面の左上位置の水平座標にマウスを相対的に返しMouseEvent.screenY垂直座標プロパティ戻ります。この2つのプロパティは、読み取り専用属性です。

// HTML 代码如下
// <body onmousedown="showCoords(event)">
function showCoords(evt) {
  console.log(
    'screenX value: ' + evt.screenX + '\n',
    'screenY value: ' + evt.screenY + '\n'
  );
}

MouseEvent.offsetX、MouseEvent.offsetY

MouseEvent.offsetXプロパティは、左ノードマウスの位置とターゲットを返すpadding（ピクセル）の水平距離のエッジ、MouseEvent.offsetY上記宛先ノード戻ると属性padding縁から垂直距離。この2つのプロパティは、読み取り専用属性です。

/* HTML 代码如下
  <style>
    p {
      width: 100px;
      height: 100px;
      padding: 100px;
    }
  </style>
  <p>Hello</p>
*/
var p = document.querySelector('p');
p.addEventListener(
  'click',
  function (e) {
    console.log(e.offsetX);
    console.log(e.offsetY);
  },
  false
);

上記のコードは、マウスがあればp要素の中心位置をクリックして、戻ります150 150。こうして左側と上部の中心位置からpadding端には、に等しいpadding幅（100個のピクセル）を加えた半値幅（50個のピクセル）要素内容領域。

MouseEvent.pageX、MouseEvent.pageY

MouseEvent.pageXプロパティは、（ピクセル単位）文書の左端から、マウスの位置を返し、MouseEvent.pageY（ピクセル）ドキュメントの側縁からプロパティ戻ります。書類見えない部分を含め、戻り値。どちらのプロパティは読み取り専用です。

/* HTML 代码如下
  <style>
    body {
      height: 2000px;
    }
  </style>
*/
document.body.addEventListener(
  'click',
  function (e) {
    console.log(e.pageX);
    console.log(e.pageY);
  },
  false
);

上記のコードでは、2000個の画素のページの高さは、垂直スクロール・バーが生成されます。ページの一番下までスクロールし、マウスの出力をクリックしてpageY値は近い2,000になります。

MouseEvent.relatedTarget

MouseEvent.relatedTargetプロパティは、ノードに関連するイベントを返します。これらのイベントのためのノードは、このプロパティの戻りを関連付けられていませんnull。このプロパティは読み取り専用です。

以下の表は、リストのさまざまなイベントtargetプロパティ値とrelatedTargetプロパティ値の正義を。

イベント名	targetプロパティ	relatedTargetプロパティ
集中する	ノードは、フォーカスを受け取ります	焦点ノードの損失
focusout	焦点ノードの損失	ノードは、フォーカスを受け取ります
MouseEnter	ノードを入力するには	ノードは、休暇に行きます
mouseleave	ノードは、休暇に行きます	ノードを入力するには
マウスアウト	ノードは、休暇に行きます	ノードを入力するには
マウスオーバー	ノードを入力するには	ノードは、休暇に行きます
dragEnter	ノードを入力するには	ノードは、休暇に行きます
dragExitを	ノードは、休暇に行きます	ノードを入力するには

ここでは一例です。

/*
  HTML 代码如下
  <div id="outer" style="height:50px;width:50px;border-width:1px solid black;">
    <div id="inner" style="height:25px;width:25px;border:1px solid black;"></div>
  </div>
*/

var inner = document.getElementById('inner');
inner.addEventListener('mouseover', function (event) {
  console.log('进入' + event.target.id + ' 离开' + event.relatedTarget.id);
}, false);
inner.addEventListener('mouseenter', function (event) {
  console.log('进入' + event.target.id + ' 离开' + event.relatedTarget.id);
});
inner.addEventListener('mouseout', function () {
  console.log('离开' + event.target.id + ' 进入' + event.relatedTarget.id);
});
inner.addEventListener("mouseleave", function (){
  console.log('离开' + event.target.id + ' 进入' + event.relatedTarget.id);
});

// 鼠标从 outer 进入inner，输出
// 进入inner 离开outer
// 进入inner 离开outer

// 鼠标从 inner进入 outer，输出
// 离开inner 进入outer
// 离开inner 进入outer

方法のMouseEventインターフェースの例

MouseEvent.getModifierState（）

MouseEvent.getModifierStateこの方法には、押圧特定の機能キーが存在しない示すブール値を返します。そのパラメータが表されたファンクションキーの文字列。

document.addEventListener('click', function (e) {
  console.log(e.getModifierState('CapsLock'));
}, false);

上記のコードは、ユーザがキャップロックを押した理解することができます。

WheelEventインタフェース

アウトライン

インタフェースはMouseEventのインスタンスを拡張WheelEvent、インスタンスオブジェクトは、マウスホイールのイベントを表します。現在、一つだけに関連付けられているマウスホイールイベントwheelイベントは、ユーザーがこのイベントのインスタンスを作成し、マウスホイールをスクロールします。

ネイティブブラウザが提供WheelEvent()生成するコンストラクタをWheelEventインスタンス。

var wheelEvent = new WheelEvent(type, options);

WheelEvent()コンストラクタは、最初のイベントの種類を表す文字列であり、二つの引数を受け入れることができ、ホイールイベントのために、この値のみであってもよいですwheel。第2のパラメータは、構成オブジェクトのイベントです。加えて、オブジェクトのプロパティEvent、UIEvent構成プロパティ以外は、以下の特性も許容することができ、すべての属性はオプションです。

• deltaX：値は、デフォルト値は0.0であり、水平方向のスクロールホイールの量を示します。
• deltaY：値は、デフォルト値は0.0であり、垂直方向のスクロールホイールの量を示します。
• deltaZ：ホイールローリング軸Zの量を表す値は、デフォルト値は0.0です。
• deltaMode：トップ3つの属性のための基礎となる転がりイベントの単位を表す値。0スクロールは、ピクセル単位で表現さ1、ラインの単位で表さ2デフォルトで、ページの単位で表さ0。

インスタンスプロパティ

WheelEventイベント・インスタンスに加えて、EventおよびMouseEventインスタンスのプロパティとインスタンスメソッド、そこに独自のプロパティのいくつかの例であるが、インスタンスメソッドを所有していません。

次のプロパティは読み取り専用属性です。

• WheelEvent.deltaX：値は、水平スクロールホイールの量を示します。
• WheelEvent.deltaY：値は、垂直スクロールホイールの量を示します。
• WheelEvent.deltaZ：値、Z軸は、ローラの転動の量を示します。
• WheelEvent.deltaMode：値は、上記の3つの属性の単位表す0ピクセル、1行、2ページ。