#マウスイベント
マウスイベントの種類
マウス イベントには主に次のものがあります。すべてのイベントは MouseEvent インターフェイスを継承します (詳細は以下を参照)。
(1) クリックイベント
マウスクリックに関連するイベントは 4 つあります。
click: マウス (通常はメイン ボタン) が押されたときに発生します。dblclick: 同じ要素をマウスでダブルクリックするとトリガーされます。mousedown: マウスボタンが押されたときにトリガーされます。mouseup: 押されたマウス ボタンが放されると発生します。
「クリック」イベントは 2 つのイベントで構成されていると考えることができます。ユーザーは最初に「マウスダウン」をトリガーし、次に同じ位置で「マウスアップ」をトリガーします。したがって、トリガー順序は、「mousedown」が最初にトリガーされ、次に「mouseup」がトリガーされ、「click」が最後にトリガーされます。
ダブルクリックすると、「mousedown」、「mouseup」、「click」の後に「dblclick」イベントがトリガーされます。
(2)移動イベント
マウスの動きに関連するイベントは 5 つあります。
mousemove: マウスがノード内で移動するとトリガーされます。このイベントは、マウスが移動し続けると継続的に発生します。パフォーマンスの問題を回避するために、一定期間内に 1 回のみ実行するように制限するなど、イベント リスニング機能にいくつかの制限を設けることをお勧めします。mouseenter: マウスがノードに入るとトリガーされます。子ノードに入ってもこのイベントはトリガーされません (詳細は以下を参照)。mouseover: マウスがノードに入るとトリガーされ、子ノードに入るとこのイベントが再度トリガーされます (詳細は以下を参照)。mouseout: マウスがノードから離れるときにトリガーされます。このイベントは、親ノードから離れるときにもトリガーされます (詳細は以下を参照)。mouseleave: マウスがノードから離れるとトリガーされます。親ノードから離れても、このイベントはトリガーされません (詳細は以下を参照)。
「mouseover」イベントと「mouseenter」イベントは両方とも、マウスがノードに入るとトリガーされます。 2 つの違いは、「mouseenter」イベントは 1 回だけトリガーされるのに対し、「mouseover」イベントはマウスがノード内を移動している限り子ノードで複数回トリガーされることです。
/* HTMLコードは以下の通り
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
*/
var ul = document.querySelector('ul');
//ul ノードに入った後、mouseenter イベントは 1 回だけトリガーされます
// 将来的には、マウスがノード内で移動する限り、このイベントはトリガーされなくなります。
//event.target は ul ノードです
ul.addEventListener('mouseenter', function (event) {
イベント.ターゲット.スタイル.カラー = '紫';
setTimeout(関数() {
イベント.ターゲット.スタイル.カラー = '';
}, 500);
}、 間違い）;
// ul ノードに入った後、子ノード上を移動している限り、mouseover イベントが複数回トリガーされます。
//event.target は li ノードです
ul.addEventListener('mouseover', function (event) {
イベント.ターゲット.スタイル.カラー = 'オレンジ';
setTimeout(関数() {
イベント.ターゲット.スタイル.カラー = '';
}, 500);
}、 間違い）;
上記のコードでは、親ノード内に子ノードを入力しても mouseenter イベントはトリガーされませんが、mouseover イベントはトリガーされます。
「mouseout」イベントと「mouseleave」イベントは両方とも、マウスがノードから離れるとトリガーされます。 2 つの違いは、子要素を親要素内に残す場合、mouseleave イベントは発生せず、mouseout イベントが発生することです。
/* HTMLコードは以下の通り
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
*/
var ul = document.querySelector('ul');
// 最初に ul ノードに入り、次にノード内に移動すると、mouseleave イベントはトリガーされません。
// ul ノードを離れるときのみ、mouseleave が 1 回トリガーされます
//event.target は ul ノードです
ul.addEventListener('mouseleave', function (event) {
イベント.ターゲット.スタイル.カラー = '紫';
setTimeout(関数() {
イベント.ターゲット.スタイル.カラー = '';
}, 500);
}、 間違い）;
// まず ul ノードに入り、次にノード内に移動すると、mouseout イベントが複数回トリガーされます。
//event.target は li ノードです
ul.addEventListener('mouseout', function (event) {
イベント.ターゲット.スタイル.カラー = 'オレンジ';
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 ビットのバイナリ値です (キーは押されていません)。 '1' (バイナリ '001') は主キー (通常は左ボタン) が押されたことを意味し、'2' (バイナリ '010') は二次キー (通常は右ボタン) が押されたことを意味し、'4' (バイナリ ') 100`) 修飾キー (通常は中央のキー) を押すことを示します。したがって、「3」(バイナリの「011」)が返された場合は、左右のボタンが同時に押されたことを意味します。relativeTarget: イベントの関連ノードを表すノード オブジェクト。デフォルトはnullです。mouseenterおよびmouseoverイベントは、マウスが離れたばかりの要素ノードを表し、mouseoutおよびmouseleaveイベントは、マウスが入っている要素ノードを表します。
以下に例を示します。
関数シミュレートクリック() {
var イベント = new MouseEvent('クリック', {
「泡」: 本当、
「キャンセル可能」: true
});
var cb = document.getElementById('チェックボックス');
cb.dispatchEvent(イベント);
}
上記のコードは、マウス クリック イベントを生成し、イベントをトリガーします。
MouseEvent インターフェイスのインスタンス プロパティ
MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、MouseEvent.shiftKey
4 つのプロパティ MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、および MouseEvent.shiftKey はすべて、イベントの発生時に対応するキーが押されたかどうかを示すブール値を返します。これらはすべて読み取り専用のプロパティです。
altKey属性: Alt キーctrlKey属性: Ctrl キーmetaKey属性: メタ キー (Mac キーボードは 4 枚の花びらの花、Windows キーボードは Windows キー)shiftKeyプロパティ: シフトキー
// HTMLコードは以下の通り
// <body onclick="showKey(event)">
関数 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、MouseEvent.buttons
MouseEvent.button プロパティは、イベントの発生時にどのマウス ボタンが押されたかを示す値を返します。このプロパティは読み取り専用です。
- 0: 主キーが押されたか (通常は左キー)、またはイベント (
mousemoveイベントなど) がこのプロパティを初期化しません。 - 1: 補助キー (通常は中央キーまたはスクロール ホイール キー) を押します。
- 2: 次のキー (通常は右のキー) を押します。
// HTMLコードは
// <button onmouseup="thisButton(event)">クリック</button>
var whatButton = 関数 (e) {
スイッチ (e.button) {
ケース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 onmousedown="showCoords(event)">
関数 showCoords(evt){
コンソール.log(
'clientX 値: ' + evt.clientX + '\n' +
'clientY 値: ' + 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 onmousedown="showCoords(event)">
関数 showCoords(evt) {
コンソール.log(
'screenX 値: ' + evt.screenX + '\n',
'screenY 値: ' + evt.screenY + '\n'
);
}
MouseEvent.offsetX、MouseEvent.offsetY
MouseEvent.offsetX プロパティは、マウスの位置とターゲット ノードの左側の padding エッジの間の水平距離 (ピクセル単位) を返し、MouseEvent.offsetY プロパティは padding からの垂直距離を返します。 ` ターゲットノードの上のエッジ。どちらのプロパティも読み取り専用です。
/* HTMLコードは以下の通り
<スタイル>
p {
幅: 100ピクセル;
高さ: 100ピクセル;
パディング: 100px;
}
</スタイル>
<p>こんにちは</p>
*/
var p = document.querySelector('p');
p.addEventListener(
'クリック'、
関数 (e) {
console.log(e.offsetX);
console.log(e.offsetY);
}、
間違い
);
上記のコードでは、p要素の中心をマウスでクリックすると、150 150が返されます。したがって、中心位置は、パディングの幅 (100 ピクセル) に、左端と上端の「パディング」端から要素のコンテンツ領域の幅の半分 (50 ピクセル) を加えたものと等しくなります。
MouseEvent.pageX、MouseEvent.pageY
MouseEvent.pageX プロパティはマウスの位置とドキュメントの左端の間の距離 (ピクセル単位) を返し、MouseEvent.pageY プロパティはドキュメントの上端からの距離 (ピクセル単位) を返します。戻り値には、ドキュメントの目に見えない部分が含まれます。どちらのプロパティも読み取り専用です。
/* HTMLコードは以下の通り
<スタイル>
体 {
高さ: 2000ピクセル;
}
</スタイル>
*/
document.body.addEventListener(
'クリック'、
関数 (e) {
console.log(e.pageX);
console.log(e.pageY);
}、
間違い
);
上記のコードでは、ページの高さは 2000 ピクセルで、垂直スクロール バーが生成されます。ページの一番下までスクロールしてマウスをクリックすると、2000 に近い pageY 値が出力されます。
MouseEvent.relativeTarget
MouseEvent.relativeTarget プロパティは、イベントの関連ノードを返します。関連付けられたノードがないイベントの場合、このプロパティは「null」を返します。このプロパティは読み取り専用です。
次の表に、さまざまなイベントの target 属性値と popularTarget 属性値を示します。
| イベント名 | ターゲット属性 | 関連ターゲット属性 |
|---|---|---|
| focusin | フォーカスを受け取るノード | フォーカスを失うノード |
| focusout | フォーカスを失うノード | フォーカスを受け取るノード |
| mouseenter | 入るノード | 出るノード |
| mouseleave | 出るノード | 入るノード |
| mouseout | これから出ようとしているノード | これから入ろうとしているノード |
| mouseover | 入るノード | 出るノード |
| dragenter | 入るノード | 出るノード |
| dragexit | 離脱するノード | 参入するノード |
以下に例を示します。
/*
HTMLコードは次のとおりです
<div id="outer" style="height:50px;width:50px;border:1px ソリッドブラック;">
<div id="inner" style="height:25px;width:25px;border:1px ソリッドブラック;"></div>
</div>
*/
var inner = document.getElementById('inner');
inner.addEventListener('mouseover', function (event) {
console.log('入場' +event.target.id +'退出' +event.popularTarget.id);
}、 間違い）;
inner.addEventListener('mouseenter', function (event) {
console.log('入場' +event.target.id +'退出' +event.popularTarget.id);
});
inner.addEventListener('mouseout', function (event) {
console.log('退出' +event.target.id + '入場' +event.popularTarget.id);
});
inner.addEventListener("mouseleave", function (event){
console.log('退出' +event.target.id + '入場' +event.popularTarget.id);
});
//マウスは外側から内側に入って出力します
// 内側を入力し、外側を残します
// 内側を入力し、外側を残します
//マウスは内側から外側に入って出力します
// 内側を離れて外側に入ります
// 内側を離れて外側に入ります
MouseEvent インターフェースのインスタンスメソッド
MouseEvent.getModifierState()
MouseEvent.getModifierState メソッドは、特定のファンクション キーが押されたかどうかを示すブール値を返します。そのパラメータは、ファンクション キー を表す文字列です。
document.addEventListener('click', function (e) {
console.log(e.getModifierState('CapsLock'));
}、 間違い）;
上記のコードは、ユーザーが Caps キーを押したかどうかを知ることができます。
WheelEvent インターフェース
概要
WheelEvent インターフェイスは、マウス ホイール イベントのインスタンス オブジェクトを表す MouseEvent インスタンスを継承します。現在、マウス ホイールに関連する「wheel」イベントは 1 つだけあり、ユーザーがマウス ホイールを回転させると、このイベントのインスタンスが生成されます。
ブラウザーは、「WheelEvent」インスタンスを生成するための「WheelEvent()」コンストラクターをネイティブに提供します。
var WheelEvent = 新しい WheelEvent(タイプ, オプション);
WheelEvent() コンストラクターは 2 つのパラメーターを受け入れることができます。最初のパラメーターは、イベント タイプを示す文字列です。現在、この値は wheel のみです。 2 番目のパラメーターは、イベントの構成オブジェクトです。 Event と UIEvent の構成プロパティに加えて、このオブジェクトのプロパティは次のプロパティも受け入れることができます。これらはすべてオプションです。
deltaX: ホイールの水平スクロール量を示す数値。デフォルト値は 0.0 です。deltaY: ホイールの垂直スクロール量を示す数値。デフォルト値は 0.0 です。deltaZ: ホイールの Z 軸回転量を示す数値。デフォルト値は 0.0 です。deltaMode: 上記 3 つのプロパティに適用される、関連するスクロール イベントの単位を示す数値。 「0」はスクロール単位がピクセルであることを意味し、「1」は単位が行であることを意味し、「2」は単位がページであることを意味し、デフォルトは「0」です。
インスタンスのプロパティ
Event と MouseEvent のインスタンス プロパティとインスタンス メソッドに加えて、WheelEvent イベント インスタンスにも独自のインスタンス プロパティがいくつかありますが、独自のインスタンス メソッドはありません。
次のプロパティは読み取り専用のプロパティです。
WheelEvent.deltaX: ホイールの水平スクロール量を示す数値。WheelEvent.deltaY: ホイールの垂直スクロール量を示す数値。WheelEvent.deltaZ: ホイールの Z 軸回転量を示す数値。WheelEvent.deltaMode: 上記 3 つの属性の単位を示す値。0はピクセル、1はライン、2はページです。
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0