関連する読み物：
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イベント学習要約です。私はそれが誰にでも役立つことを願っています！