Web APIのマウスイベント

マウスイベント

イベント監視に関しては、addEventListener監視または要素の属性を通じてoneventname指定できます。

const app = document.getElementById('app')
//通过addEventListener方法注册事件监听器
app.addEventListener('click',(event)=>{
  console.log('app',event)
})
//通过元素的onclick属性注册事件监听器
app.onclick = (e)=>{
}

後続のすべてのイベントは、上記の 2 つの方法で登録できます。

イベント キャプチャとバブリングの場合、イベント ハンドラーはデフォルトでバブリング フェーズに登録されるようになりました。

マウスイベントの種類

auxclick

実験的な特性。主ではないマウス ボタン (左ボタンなど) がクリックされたときに発生します。対応する要素のonauxclick属性

click

clickこのイベントは、要素上でマウスの左ボタンが押されて放されるとトリガーされます。

マウスを要素上で押し、要素の外に移動して放した場合、2 つの要素を含む最も具体的な親要素でイベントがトリガーされます。

イベントオブジェクトのタイプPointerEvent。ポインタ イベント ポインタ イベント。

contextmenu

ユーザーがコンテキスト メニューを開こうとすると発生します。通常、マウスを右クリックするか、キーボードのメニュー キーが押されたときに (失敗したときに) トリガーされます。メニューキーを使用すると、フォーカスされた要素の左下隅にメニューが表示され、要素がDOMツリーの場合は行の左下隅にメニューが表示されます。通常、ブラウザのページを右クリックすると、ブラウザの右クリック メニューが表示されますが、event.preventDefault()メソッドを使用してブラウザのデフォルトのコンテキスト メニューを無効にすることができます。

app.addEventListener('click',(event)=>{
  console.log('app',event)
  event.preventDefault()
})

イベントオブジェクトPointerEvent

dblclick

ダブルクリック イベント。このイベントは、単一の要素上でマウスの左ボタンが 2 回クリックされるとトリガーされます。

イベントオブジェクトMouseEvent

mousedown

ポインティング デバイスのボタンが押されたときに発生します。

イベントオブジェクトMouseEvent

mouseenter

イベントをトリガーする要素内のアクティブ化領域上にマウスが最初に移動したときに発生します。この最初の動きについての私の理解は、マウスがこの要素から出て、次にこの要素に移動したときにトリガーされるということです。

イベントオブジェクトMouseEvent

mouseleave

ポインタが要素の外に移動すると発生します。に似ていますmouseoutが、mouseleaveバブリングはありません。ポインタが要素とそのすべての子孫から離れるときに起動されますmouseleave。ポインターが要素から離れるとき、または要素の子孫から離れるときに (ポインターがまだ要素内にある場合でも) 発生しますmouseout。

イベントオブジェクトMouseEvent

mousemove

このイベントは、マウスが要素上 (つまり、要素内) に移動するとトリガーされます。

イベントオブジェクトMouseEvent

mouseout

ぜひご覧くださいmouseleave。

イベントオブジェクトMouseEvent

mouseover

このイベントは、マウスが要素の上に移動すると、要素上でトリガーされます。mouseenterエリアがアクティブ化された場合にのみトリガーされます。例えば？

イベントオブジェクトMouseEvent

mouseup

マウスが要素内にあるときにマウス ボタンが放されると発生します。

イベントオブジェクトMouseEvent

MouseEventインターフェース

MouseEventインターフェースの継承関係：MouseEvent→ UIEvent→Event

、 、のEventプロパティとメソッドを見てみましょう。UIEventMouseEvent

Eventインターフェース

属性

ROは読み取り専用を意味します

• bubblesRO bool は、イベントが DOM 内でバブルアップするかどうかを示すために使用されます。
• cancelBubblestopPropagation() の歴史的な別名。イベント ハンドラーが戻る前に、バブリングを防ぐためにこのプロパティを true に設定します。
• cancelableRO bool はイベントをキャンセルできるかどうかを示します
• composedRO boo は、イベントがシャドウ DOM と通常の DOM を介してバブルできるかどうかを示します
• currentTargetRO obj は、イベントの現在登録されているターゲットへの参照です。識別子は、現在のイベントが DOM に沿ってトリガーされるときのイベントの現在のターゲットです。常に、イベントがバインドされている要素を指します。これは、同じイベント ハンドラーが複数の要素にバインドされている場合に便利です。https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
• eventPhaseRO int は、イベント ストリームの準備と処理の段階を示します。https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
• target  RO obj イベントの元のターゲット値への参照。ここでの「オリジナル」とは、イベントが最初にディスパッチされたときに指定されたターゲットを指します。
• timeStampROミリ秒
• typeRO イベントのタイプ（大文字と小文字は区別されません）
• isTrustedRO は、イベントがブラウザによって開始されたか、スクリプトによって開始されたかを示します。真のユーザー

方法

• composePath()イベントのパスを返します。
• preventDefault()イベントをキャンセルします。このイベントが明示的に処理されない場合、デフォルトのアクションを通常どおり実行すべきではないことをユーザー エージェントに伝えます。しかし、事件はさらに広がり続けるだろう。
• stopImmediatePropagation()この特定のイベントに対して他のリスナーは呼び出されません。このイベントは、同じ要素にも、後で走査される要素にも追加されません。同じイベントをリッスンする他のイベント リスナーが呼び出されないようにします。複数のイベント リスナーが同じ要素の同じイベント タイプにアタッチされている場合、このイベントが発生すると、追加された順序で呼び出されます。いずれかのイベント リスナー内で実行された場合stopImmediatePropagation()、残りのイベント リスナーは呼び出されません。
• stopPropagation()キャプチャフェーズとバブリングフェーズで現在のイベントがさらに伝播するのを防ぎます。ただし、デフォルトの動作の発生を防ぐことはできません。

UIEventインターフェース

UIEventEventこれには、すべてのプロパティとメソッドに加えて、次のプロパティも含まれています。

属性

• detailRO 値が空でない場合、現在のクリック数が表示されます。click/dblclick は現在のクリック数です。mousedown/mouseup は現在のクリック数に 1 を加えたものです。他の値は0です。
• pageXRO 非標準 ドキュメント全体に対する相対的な x 座標をピクセル単位で返します。このドキュメントでは、ドキュメントの端に基づいて任意のページの水平スクロールを考慮します。たとえば、ページが右に 200 ピクセルスクロールし、スクロール バーが表示される場合、ドキュメントの左側はウィンドウに対して左に 200 ピクセル移動します。マウス クリックはウィンドウの左側から 100 ピクセル離れていますが、これは pageX の戻り値である 300 のままです。
• pageYRO 同上
• viewRO は、作成時に document.defaultView オブジェクトを返します。ブラウザでは、これはイベントが発生するウィンドウ オブジェクトです。

MouseEventインターフェース

MouseEventUIEventのすべてのプロパティとメソッドに加えてEvent、次のプロパティも含まれています。

属性

• altKeyRO bool マウスイベントがトリガーされたときに Alt キーが押された場合は true を返します。
• buttonRO イベントをトリガーしたユーザーが押したマウス ボタンを表す値を返します。このプロパティは、イベントをトリガーした 1 つまたは複数のキーを押すか離す間にどのキーが押されたかを示すことのみができます。デフォルトでは、0 が左ボタン、2 が右ボタンですが、ユーザーが変更できます。
• buttonsRO は、イベントがトリガーされたときにどのマウス ボタンが押されたかを示します。マウスによって押されたボタンを識別する番号。複数のキーが押された場合、値はすべてのキーの対応する値に対する OR (|) 演算の結果と等しくなります。
• clientXRO は、イベントが発生したときのアプリケーションのクライアント領域 (ブラウザ ウィンドウ) の水平座標を提供します。  xプロパティは彼の別名です。
• clientYRO は、イベントが発生したときのアプリケーションのクライアント領域 (ブラウザ ウィンドウ) の垂直座標を提供します。yプロパティは彼の別名です。
• ctrlKeyRO bool マウスイベントがトリガーされたときに Ctrl キーが押されている場合は true を返します。
• metaKeyRO bool は、マウス イベントがトリガーされたときにメタ キー (ウィンドウ オペレーティング システムのキーボードの Win キー) が押された場合に true を返します。
• movementXRO現在のイベントと前のイベントmousemoveの間の水平方向のマウス移動値。
• movementYRO 同上、垂直方向
• offsetXRO イベント オブジェクトとターゲット ノード間の x 軸方向のパディングのオフセット。現在のターゲット ノードは、このイベントが発生する要素です。
• offsetYRO 上と同じ、y 軸。
• regionRO は、クリック イベントの影響を受けるクリック領域 ID を返します。影響を受ける領域がない場合は null を返します。
• relatedTargetマウス イベントの RO セカンダリ ターゲットhttps://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/popularTarget
• screenXマウスのグローバル (画面) 水平座標 (オフセット)。複数画面ディスプレイの場合、横に並んだ画面は 1 つのデバイスとして扱われます。
• screenYRO 上と同じ、垂直座標。
• shiftKeybool マウスイベントがトリガーされたときに Shift キーが押された場合は true を返します。