関連する読み物:
javascriptイベント学習概要(v)JSのマウスイベントタイプ
//www.vevb.com/article/86259.htm
JavaScriptイベント学習概要(i)イベントフロー
//www.vevb.com/article/86261.htm
JavaScriptイベント学習概要(iv)イベントのパブリックメンバー(プロパティと方法)
//www.vevb.com/article/86262.htm
JavaScriptイベント学習概要(ii)JSイベントハンドラー
//www.vevb.com/article/86264.htm
JavaScriptイベント学習概要(iii)JSイベントオブジェクト
マウスイベント
9つのマウスイベントは、DOM3レベルイベントで定義されています。
Mousedown:マウスボタンが押されたときにトリガーされます(左または右)。
キーボードでトリガーすることはできません。
MouseUp:マウスボタンが解放されてポップアップするとトリガーされます。
キーボードでトリガーすることはできません。
クリック:左マウスボタンをクリックするとき、またはEnterキーを押すとトリガーされます。これは、アクセシビリティを確保するために重要です。つまり、オンクリックイベントハンドラーは、キーボードとマウスを介して実行できることを意味します。 dblclick:左マウスボタンがダブルクリックされたときにトリガーされます。マウスオーバー:マウスをターゲット要素の上に移動します。これは、マウスがその子孫要素を動かしたときに発射されます。マウスアウト:マウスは上記のターゲット要素を削除します。
Mouseenter:マウスは元素の範囲に移動し、イベントをトリガーしますが、これはバブルではありません。つまり、マウスがその子孫要素に移動するときにトリガーされません。
Mouseleave:マウスが元素の範囲から外れているときにトリガーされ、イベントが泡立ちません。つまり、マウスがその子孫要素に移動するときにトリガーされません。
Mousemove:マウスは、要素内側に移動すると常にトリガーされます。
キーボードでトリガーすることはできません。
注記:
MousedownおよびMouseUpイベントは、要素で連続してトリガーされ、クリックイベントをトリガーします。 DBLCLICKイベントは、2回のクリックイベントが次々に起動された場合にのみトリガーされます。
MousedownまたはMouseUpの1つがキャンセルされた場合、クリックイベントはトリガーされません。クリックイベントが直接または間接的にキャンセルされた場合、dblclickイベントはトリガーされません。
1。イベントの順序トリガー
たとえば、ボタンをダブルクリックして、上記のトリガーされたイベントをご覧ください。
<Body> <入力ID = "BTN" TYPE = "BUTTON" VALUE = "CLICK"/> <script> var btn = document.getElementById( "btn"); btn.addeventlistener( "mousedown"、function(event){console.log( "mousedown");}、false); btn.addeventlistener( "mouseup"、function(){console.log( "mouseup");}、false); btn.addeventlistener( "click"、function(){console.log( "click");}、false); btn.addeventlistener( "dblclick"、function(){console.log( "dblclick");}、false); </script> </body>2。マウスエンサーとマウスオーバーの違い
違い:
マウスオーバーイベントは泡立ちます。つまり、マウスが子孫の要素に移動すると発射されます。
マウスエンターイベントはバブルではありません。つまり、マウスは子孫の要素に移動するときに発射されません。
例えば:
<!doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> #outer {position:absolute;幅:200px;高さ:200px;上:0;左:0;下:0;右:0;マージン:自動;背景色:ピンク; } #inner {position:absolute;幅:100px;高さ:100px;トップ:50%;左:50%;マージン左:-50px;背景色:オレンジ;テキストアライグ:センター;ラインハイト:100px; }#outer、#inner {border-radius:50%; } </style> <スクリプトsrc = "jquery-2.1.1.min.js"> </script> </head> <body> <body> <div div = "outer"> <div id = "inner"> </div> </body> <script> var parentdiv = document.getelementbyid( " console.log( "親divのマウスオーバーイベントはトリガーされます");}、false); // parentdiv.addeventlistener( "mouseenter"、function(){// console.log( "親divのマウスエンターイベントがトリガーされます"); {// console.log( "親divのマウスアウトイベントはトリガーされます"); //}、false); // parentdiv.addeventlistener( "mouseleave"、function(){// console.log( "parent divのmouseleaeaveイベント");注記:
マウスオーバーはマウスアウトに対応し、マウスエンターはムーセリーブに対応します。上記のコードでは、その効果を無効にすることができます。
jQueryのホバーAPIは、マウスエンテルとムーセリーブを組み合わせて使用します。
3。左と右のマウスボタン
<script type = "text/javascript"> document.onmousedown = function(ev){var oevent = ev || event; alert(oevent.button); // IEの左マウスボタンは1、右マウスボタンは2、FFの左マウスボタン、クロムの右マウスボタンは0です。右マウスボタンは2}; </scrip>4。マウスオーバーとマウスムーブの違い
一般的に言えば、マウスオーバーで十分ですが、Mousemoveは特別な状況でのみ使用されます。 MouseMoveは、マウス座標の変化を監視するなど、よりリソースを消費します。
上記は、JSのイベントタイプのマウスイベントに関する編集者(V)関連知識によって紹介されたJavaScriptイベント学習要約です。私はそれが誰にでも役立つことを願っています!