マウスイベント

マウスイベントの種類

マウスイベントには主に以下があり、全てのイベントがMouseEventインターフェースを継承します（詳細は下記を参照）。

(1) クリックイベント

マウスクリックに関連するイベントは 4 つあります。

click: マウスが押されたときに (通常は主ボタンが押されたときに) 発生します。
dblclick: 同じ要素をマウスでダブルクリックするとトリガーされます。
mousedown: マウスボタンが押されたときにトリガーされます。
mouseup: 押されたマウスボタンが放されると発生します。

clickmousedownイベントは、ユーザーが最初にトリガーし、次に同じ場所でトリガーするという 2 つのイベントで構成されていると見なすことができますmouseup。したがって、点火の順序は、mousedown最初に点火し、mouseup次に点火し、click最後に点火することになります。

ダブルクリックすると、、、の後にdblclickイベントがトリガーされます。mousedownmouseupclick

(2) モバイルイベント

マウスの動きに関連するイベントは 5 つあります。

mousemove: マウスがノード内を移動するとトリガーされます。このイベントは、マウスが動き続けると継続的に発生します。パフォーマンスの問題を回避するために、このイベントのリスニング機能にいくつかの制限を設けることをお勧めします。たとえば、一定期間内に 1 回のみ実行できるようにします。
mouseenter: このイベントは、マウスがノードに入ったときにトリガーされますが、マウスが子ノードに入ったときにはトリガーされません (詳細は以下を参照)。
mouseover: マウスがノードに入るとトリガーされ、このイベントはマウスが子ノードに入ると再びトリガーされます (詳細は以下を参照)。
mouseout: マウスがノードから離れるときにトリガーされ、このイベントはマウスが親ノードから離れるときにもトリガーされます (詳細は以下を参照)。
mouseleave: マウスがノードから離れるとトリガーされます。親ノードを離れるとこのイベントはトリガーされません (詳細は以下を参照)。

mouseovermouseenterマウスがノードに入ると、イベントとイベントの両方がトリガーされます。2 つの違いは、mouseenterイベントは 1 回だけトリガーされ、マウスがノード内を移動している限り、mouseoverイベントは子ノードで複数回トリガーされることです。

/* HTML コードは次のとおりです。
 <ul> 
   <li>項目 1</li> 
   <li>項目 2</li> 
   <li>項目 3</li> 
 </ul> 
*/ 
var
ul = document. querySelector(' ul'); 
//
ul ノードに入ると、mouseenter イベントは 1 回だけトリガーされます
// マウスがノード内で移動する限り、このイベントは再度トリガーされません
// events.target は、 ul ノード
ul.addEventListener('mouseenter' , function (event) { 
  event.target.style.color = 'purple'; 
  setTimeout(function () { 
    event.target.style.color = ''; 
  }, 500); 
} , false); 
//
ul を入力します ノードの後、子ノード上を移動している限り、mouseover イベントが複数回トリガーされます
// events.target は li ノードです
ul.addEventListener('mouseover',function (event) { 
  event.target.style.color = 'orange';
  setTimeout(function() {
    イベント.ターゲット.スタイル.カラー = ''; 
  }, 500); 
}、 間違い）;

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

mouseoutmouseleaveマウスがノードから離れると、イベントとイベントの両方がトリガーされます。mouseleave2 つの違いは、イベントが発生する一方で、親要素内に子要素を残すとmouseoutイベントが発生しないことです。

/* HTML コードは次のとおりです。
 <ul> 
   <li>項目 1</li> 
   <li>項目 2</li> 
   <li>項目 3</li> 
 </ul> 
*/ 
var
ul = document. querySelector(' ul'); 
//
最初に ul ノードに入り、次にノード内に移動すると、mouseleave イベントはトリガーされません
// ul ノードから出るときのみ、mouseleave が 1 回トリガーされます
// events.target はUL ノード
ul.addEventListener('mouseleave', function (event) { 
  event.target.style.color = 'purple'; 
  setTimeout(function () { 
    event.target.style.color = ''; 
  }, 500); 
}, false); 
//
ul 最初のノードを入力し、次にノード内に移動すると、mouseout イベントが複数回トリガーされます
// events.target は li ノードです
ul.addEventListener('mouseout',関数 (イベント) {
  setTimeout(関数() {
    イベント.ターゲット.スタイル.カラー = ''; 
  }, 500); 
}、 間違い）;

上記のコードでは、子ノードを親ノード内に残しておくとmouseleaveイベントはトリガーされませんが、mouseoutイベントはトリガーされます。

(3) その他のイベント

contextmenu: マウスの右ボタンが押されたとき (コンテキストメニューが表示される前)、または [コンテキスト] メニューキーが押されたときに発生します。
wheel: マウスホイールを回転するとトリガーされ、このイベントはインターフェイスを継承しますWheelEvent。

MouseEventインターフェース

MouseEventこのインターフェイスは、クリック (click)、ダブルクリック (dblclick)、マウスボタンを放す (mouseup)、マウスボタンを押す (mousedown) などのマウス関連のイベントを表し、生成されるイベントオブジェクトはすべてインスタンスですMouseEvent。さらに、ホイールイベントやドラッグイベントもMouseEventインスタンスです。

MouseEventこのインターフェイスは、Eventインターフェイスのすべてのプロパティとメソッドを継承しEvent、マウスに固有のプロパティとメソッドも提供します。

ブラウザーは、MouseEvent()新しいMouseEventインスタンスを作成するためのコンストラクターをネイティブに提供します。

var イベント = 新しい MouseEvent(タイプ, オプション);

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(binary 001) は主キー (通常は左キー) が押されたことを意味し、2(binary 010) は副キー (通常は右キー) が押されたことを意味し、4(binary 100) は副キー (通常は中央キー) が押されたことを意味します。3したがって、 (binary )が返された場合は、011左ボタンと右ボタンが同時に押されたことを意味します。
relatedTarget: イベントの関連ノードを表すノードオブジェクト。デフォルトはですnull。mouseenterandeventの場合はmouseoverマウスが去ったばかりの要素ノードを示し、 eventの場合mouseoutはmouseleaveマウスが入っている要素ノードを示します。

以下に例を示します。

function SimulateClick() { 
  var イベント = new MouseEvent('click', { 
    'bubbles': true, 
    'cancelable': true 
  }); 
  var cb = document.getElementById('チェックボックス'); 
  cb.dispatchEvent(イベント); 
}

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

MouseEvent インターフェイスのインスタンスプロパティ

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

MouseEvent.altKey、、、、これら4 つのプロパティはすべて、イベントの発生時に対応するキーが押されMouseEvent.ctrlKeyたかどうかを示すブール値を返します。これらはすべて読み取り専用のプロパティです。MouseEvent.metaKeyMouseEvent.shiftKey

altKey属性: Alt キー
ctrlKey属性: Ctrlキー
metaKey属性: メタキー (Mac キーボードは 4 枚の花びらの花、Windows キーボードは Windows キー)
shiftKey属性: シフトキー

// HTML 代码如下
// <body οnclick="showKey(event)"> 
function showKey(e) { 
  console.log('ALT キーが押されました: ' + e.altKey); 
  console.log('CTRL キーが押されました: ' + e.ctrlKey); 
  console.log('META キーが押されました: ' + e.metaKey); 
  console.log('SHIFT キーが押されました: ' + e.shiftKey); 
}

上記のコードでは、Web ページをクリックすると、対応するキーが同時に押されたかどうかが出力されます。

マウスイベント.ボタン，マウスイベント.ボタン

MouseEvent.buttonこのプロパティは、イベントの発生時にどのマウスボタンが押されたかを示す番号を返します。このプロパティは読み取り専用です。

0: 主キー (通常は左キー) が押されたか、イベントによってこのプロパティが初期化されません (mousemoveイベントなど)。
1: 修飾キー (通常は中央のキーまたはスクロールホイールキー) を押します。
2: 次のキー (通常は右のキー) を押します。

// HTML代码です
// <button οnmοuseup="thatButton(event)">点击</button> 
var whatButton = function (e) { 
  switch (e.button) { 
    case 0: 
      console.log('左ボタンがクリックされました。 '); 
      壊す; 
    ケース 1: 
      console.log('中央のボタンがクリックされました。'); 
      壊す; 
    ケース 2: 
      console.log('右ボタンがクリックされました。'); 
      壊す; 
    デフォルト: 
      console.log('予期しないコード: ' + e.button); 
  } 
}

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

1: 2 進数は001(10 進数の 1)、左ボタンが押されたことを意味します。
2: 2 進数は010(10 進数の 2)、右ボタンを押すことを意味します。
4: 2 進数は100(10 進数の 4)、中央ボタンまたはホイールボタンを押すことを意味します。

複数のキーが同時に押されると、押された各キーに対応するビットに値が設定されます。たとえば、左ボタンと右ボタンを同時に押すと、3 (2 進数で 011) が返されます。

MouseEvent.clientX，MouseEvent.clientY

MouseEvent.clientXこのプロパティは、ブラウザウィンドウの左上隅を基準としたマウス位置の水平座標 (ピクセル単位) を返し、プロパティはMouseEvent.clientY垂直座標を返します。どちらのプロパティも読み取り専用プロパティです。

// HTML 代コードです
// <body οnmοusedοwn="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。

どちらのプロパティも読み取り専用プロパティです。

MouseEvent.screenX，MouseEvent.screenY

MouseEvent.screenXこのプロパティは、画面の左上隅を基準としたマウス位置の水平座標 (単位ピクセル) を返し、プロパティはMouseEvent.screenY垂直座標を返します。どちらのプロパティも読み取り専用プロパティです。

// HTML コードは次のとおりです
// <body Onmοusedοwn="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垂直距離を返します。どちらのプロパティも読み取り専用プロパティです。

/* HTML 代码如下
  <style> 
    p { 
      width: 100px; 
      高さ: 100ピクセル; 
      パディング: 100px; 
    </style> 
  <p>
  こんにちは</p> 
*/ 
var p = document.querySelector('p'); 
p.addEventListener( 
  'click', 
  function (e) { 
    console.log(e.offsetX); 
    console.log(e.offsetY); 
  }, 
  false 
);

上記のコードでは、マウスがp要素の中心をクリックすると、が返されます150 150。したがって、中心位置は、左端と上端の幅(100 ピクセル) に要素のコンテンツ領域の幅の半分 (50 ピクセル) を加えたものとpadding等しくなります。padding

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 ピクセルで、垂直スクロールバーが生成されます。ページの一番下までスクロールしてマウスをクリックすると、pageY2000 に近い値が出力されます。

MouseEvent.関連ターゲット

MouseEvent.relatedTargetプロパティはイベントに関連付けられたノードを返します。関連付けられたノードがないイベントの場合、このプロパティが返されますnull。このプロパティは読み取り専用です。

次の表に、さまざまなイベントのtargetプロパティ値とrelatedTargetプロパティ値の定義を示します。

イベント名	ターゲット属性	関連ターゲットプロパティ
集中する	フォーカスを受け取るノード	焦点が合っていないノード
フォーカスアウト	焦点が合っていないノード	フォーカスを受け取るノード
マウスエンター	入るノード	離れるノード
マウスを離れる	離れるノード	入るノード
マウスアウト	離れるノード	入るノード
マウスオーバー	入るノード	離れるノード
キャリア	入るノード	離れるノード
彼は引きずった	離れるノード	入るノード

以下に例を示します。

/* 
  HTML コードは次のとおりです。
  <div id= "outer" style="height:50px;width:50px;border:1px plain black;"> <div id= "inner" style="height: 
    25px;width: 25px;border :1pxソリッドブラック;"></div> 
  </div> 
*/ 

var inner = document.getElementById('inner'); 
inner.addEventListener('mouseover', function (event) { 
  console.log(' enter' +event.target.id + 'leave' +event.popularTarget.id); 
}, false); 
inner.addEventListener('mouseenter', function (event) { 
  console.log('enter' +event.target. id + 'leave' +event.popularTarget.id); 
}); 
inner.addEventListener('mouseout', function (event) { 
  console.log('leave' +event.target.id + 'enter' +event.popularTarget.id);log('leave' +event.target.id + 'enter' +event.popularTarget.id); 
});
inner.addEventListener("mouseleave", function (event){ 
  console.log('leave' +event.target.id + 'enter' +event.popularTarget.id); 
}); 

// マウスが外側から内側に入り、出力
// 内側に入り、外側を離れます
// 内側に入り、外側を離れます

// マウスは内側から外側に入り、出力します
// 内側を離れ、外側に入ります
// 内側を離れ、外側を入力します

MouseEvent インターフェイスのインスタンスメソッド

MouseEvent.getModifierState()

MouseEvent.getModifierStateこのメソッドは、特定のファンクションキーが押されたかどうかを示すブール値を返します。その引数は、ファンクションキーを表す文字列です。

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

上記のコードは、ユーザーが Caps キーを押したかどうかを調べます。

WheelEvent インターフェース

概要

WheelEvent インターフェイスは、マウスホイールイベントのインスタンスオブジェクトを表す MouseEvent インスタンスを継承します。現在、マウスホイールに関連するイベントは 1 つだけありwheel、ユーザーがマウスホイールを回すと、このイベントのインスタンスが生成されます。

WheelEvent()ブラウザーは、インスタンスを生成するためのコンストラクターをネイティブに提供しますWheelEvent。

var WheelEvent = 新しい WheelEvent(タイプ, オプション);

WheelEvent()コンストラクターは 2 つのパラメーターを受け入れることができます。1 つ目はイベントタイプを示す文字列です。ホイールイベントの場合、この値はのみです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.deltaMode0：上記3つのプロパティ（ピクセル、1ライン、ページ）の単位を示す数値2。

JavaScript学習用のマウスイベント

マウスイベント

マウスイベントの種類

MouseEventインターフェース

MouseEvent インターフェイスのインスタンスプロパティ

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

マウスイベント.ボタン，マウスイベント.ボタン

MouseEvent.clientX，MouseEvent.clientY

MouseEvent.movementX，MouseEvent.movementY

MouseEvent.screenX，MouseEvent.screenY

MouseEvent.offsetX，MouseEvent.offsetY

MouseEvent.pageX，MouseEvent.pageY

MouseEvent.関連ターゲット

MouseEvent インターフェイスのインスタンスメソッド

MouseEvent.getModifierState()

WheelEvent インターフェース

概要

インスタンス属性

おすすめ

JavaScript学習用のマウスイベント

マウスイベント

マウスイベントの種類

MouseEventインターフェース

MouseEvent インターフェイスのインスタンス プロパティ

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

マウスイベント.ボタン，マウスイベント.ボタン

MouseEvent.clientX，MouseEvent.clientY

MouseEvent.movementX，MouseEvent.movementY

MouseEvent.screenX，MouseEvent.screenY

MouseEvent.offsetX，MouseEvent.offsetY

MouseEvent.pageX，MouseEvent.pageY

MouseEvent.関連ターゲット

MouseEvent インターフェイスのインスタンス メソッド

MouseEvent.getModifierState()

WheelEvent インターフェース

概要

インスタンス属性

おすすめ

MouseEvent インターフェイスのインスタンスプロパティ

MouseEvent インターフェイスのインスタンスメソッド