Javascript のマウスとホイールのイベント_JavaScript スキルに関する簡単な説明

a) マウス イベント

マウスは最も一般的に使用されるナビゲーション デバイスであるため、マウス イベントは Web ページで最も一般的に使用されるイベントである可能性があります。DOM3 レベルのイベントには 9 つのマウス イベントが定義されています。

クリック: ユーザーがマウスの主ボタン (通常はマウスの左ボタン) をクリックするか、Enter キーを押すとトリガーされます。

dbclick: ユーザーが主マウス ボタンをダブルクリックするとトリガーされます。このイベントは DOM2 レベルのイベントでは定義されていませんが、一般的にサポートされており、後に DOM3 レベルで標準化されました。

Mousedown: ユーザーがマウスのボタンを押すとトリガーされます。このイベントはキーボードからトリガーすることはできません。

Mouseenter: マウス アイコンが要素の外側から要素の境界内に移動するとトリガーされます。このイベントはバブリングをサポートしておらず、マウスが要素の上面を移動するとトリガーされます。このイベントはDOM2レベルのイベントではなく、DOMレベル3以降に追加されたイベントです。IE、FF9、operaがこのイベントをサポートしています。

Mouseleave: このイベントは、マウスが要素上にあるときに要素の境界から出るとトリガーされます。これは、バブリングをサポートしません。このイベントは DOM2 レベルのイベントには属しませんが、後に追加されたイベント、IE、FF9、および Opera がこのイベントをサポートしています。

Mousemove: マウスが要素の周りを移動すると繰り返しトリガーされます。このイベントはキーボード イベントを通じてトリガーすることはできません。

Mouseout: マウスが要素の上にあり、その後他の要素の上に移動するとトリガーされます。要素が元の要素の境界の外に移動するか、元の要素の子要素上に移動します。このイベントはキーボードではトリガーできません。

Mouseover: ユーザーが初めてマウスを要素の境界の外側から要素の境界内に移動したときにトリガーされます。このイベントはキーボードからトリガーすることはできません。

Mouseup: ユーザーがマウス ボタンを放したときにトリガーされます。このイベントはキーボードからトリガーすることはできません。

ページ上のすべての要素は、mouseenter と Mouseleave を除き、すべてのイベントをバブルアップし、デフォルトの動作をキャンセルできます。ただし、一部のマウス イベントは相互に依存しているため、マウス イベントのデフォルトの動作をキャンセルすると、他のイベントに影響を与える可能性があります。

同じ要素でマウスダウン イベントとマウスアップ イベントがトリガーされた場合にのみ、マウス クリック イベントがトリガーされます。どちらかのイベントがキャンセルされたと仮定すると、クリック イベントはトリガーされません。同様の原理として、dbclick イベントは click イベントに依存します。2 つの連続したクリック イベントのいずれかがキャンセルされた場合、dbclick はトリガーされません。一般的に使用されるマウス イベントは次のとおりです:

1.mousedown、2.mouseup、3.click、4.mousedown、5.mouseup、6.click、7.dbclick。

click イベントでも dbclick イベントでも、どちらも他のイベントのトリガーに依存します。

次のコードを使用して、ブラウザが dom2 イベントでのマウス イベントをサポートしているかどうかを判断できます。

var isSupport = document.implementation.hasFeature('MouseEvents', '2.0'); >
ただし、dom3 レベルのイベントの検出は若干異なることに注意してください。

var isSupport = document.implementation.hasFeature('MouseEvent','3.0'); > マウス イベントには、サブクラス イベントであるホイール イベント (ホイール イベント) も含まれています。ホイール イベントには、マウス ホイール イベント、または Mac のタッチパッドなどの他のデバイスの操作を反映するイベントが 1 つだけ含まれています。


b) 関連要素

マウスオーバー イベントとマウスアウト イベントの場合、これらのイベントによって実行されるアクションにはイベント関連要素もあります。 移動 マウスが内部から移動します。ある要素の境界を別の要素の境界の内側に移動します。マウスオーバー イベントを例にとると、その主なターゲット要素はマウスの移動先の要素であり、関連する要素はマウスを失う要素です。同様に、mouseout イベントの場合、メイン ターゲットはマウスが移動する要素であり、関連要素はマウスを取得する要素です。DOM は、IE8 以前のイベント オブジェクトの関連要素に関する情報を提供します。 IE のバージョンは、relationTarge 属性をサポートしていませんが、fromElement 属性と toElement 属性に同様の機能を提供します。 IE では、mousemove イベントがトリガーされると、イベント オブジェクトの fromElement に関連する要素が含まれます。mouseout イベントがトリガーされると、イベントの toElement 属性に関連する要素が含まれます。 IE9 ではすべての属性がサポートされています。クロスブラウザーの getManyTarget メソッドは次のように記述できます。

コードをコピー コードは次のとおりです。 : vareventUtil = {

getRelateTarget:function(event){

if (event.popularTarget) {
return events.popularTarget
}else if(event; .fromElement) {
returnevent.fromElement;
}else if(event.toElement){
returnevent.toElement;
}
}
}

;

c)buttons

click イベントは、マウスの主ボタンが要素をクリックしたとき (または要素がフォーカスを取得して Enter キーを押したとき) にのみトリガーされます。マウスダウンとマウスアップの場合は、イベント オブジェクトのイベントに属性ボタンがあり、どのキーが押されるか離されるかを決定できます。通常、DOM で実装できるボタン属性値は 3 つあります:

0: 主キーを表します、

1: スクロール ホイールを表します、

2: を表します二次キー。

一般に、主キーはマウスの左ボタンを指し、副キーはマウスの右ボタンを指します。

IE8 以降、ボタン属性も提供されますが、値の範囲はまったく異なります。

0: ボタンは押されていません。

1: 主キーが押されています。押下、

、2: 副キーが押されたことを表します、

、3: 主キーと副キーの両方が押されたこと、

、4: 中央キーを表します

5：主キーとミドルウェアが押されたことを示す、

6：副キーと中キーが押されたことを示す、

7： 3 つのキーがすべて押されていること。

DOM モデルでのボタン属性の値の範囲は、IE モデルでの値の範囲よりもはるかに単純であることがわかり、個人的には IE での動作状況は少し異常であると感じています。

d) その他のイベント情報

DOM2 レベルのイベントでは、クリック イベントなどのより多くのイベント情報を提供するために、イベント オブジェクト イベントに Detail 属性も提供されます。たとえば、detail は同じピクセル位置でのクリック数を記録できます。detail の値は 1 からカウントされ、マウスがマウスダウンとマウスアップの間に移動すると、この値はクリアされます。

マウスイベントについては最初に書き、将来的には徐々に完成させていきます。