jsのマウスイベントのまとめ

js のマウス イベントには、主に onclick、onmousedown、onmouseup、oncontextmenu、ondblclick が含まれます。もちろん、IE の以前のバージョンでは、イベント オブジェクトはウィンドウの下にハングされます。これについては別途説明します。

1. htmlでイベントを追加

<input type="button" click="alert(1)"/>

2. DOMレベル0でイベントを追加

<input type="button" value="点击"/>
<script>var btn=document.getElementsByTagName('input')[0];
    btn.onclick=function(){
         alert(1);
}</script>

3. DOMレベル2でイベントを追加

イベント監視では主に、イベントの種類、実行する必要がある関数、バブルするかどうかの 3 つのパラメーターを受け取ります。デフォルトでは、バブリングが許可されています

document.addEventListener('click',function( ){ },true)

上記は、DOM レベルで追加されるイベントを追加する 3 つの方法です。 0 イベントの欠点の 1 つは、同じイベントを追加すると、後で書き込まれたイベントが最初に書き込まれたイベントを上書きしますが、DOM2 レベルで追加された同じイベントは前のイベントを上書きしないことです。同時に、DOM2 レベルで追加されたイベント タイプの前に「on」がないことに注意してください。イベントを削除したい場合は、DOM0 レベルでイベントを に設定することでイベントを直接クリアできます。 null ですが、DOM2 レベルで追加された関数の場合は匿名関数であり、この 2 つは同じ関数を指していないため、removeEventListener() メソッドでは削除できません。削除したい場合は、忘れずに使用してください。名前付き関数。最後のパラメータについては、true はバブリングを表し、false はキャプチャを表します。

/*
* onclick イベントがトリガーされると、console.log(ev.that)、マウスの左ボタンの値は 1 になります
* oncontextmenue がトリガーされると、マウスの右ボタンの値は 3 になりますとなり、onclick イベントはトリガーされません
* マウスホイールを使用する場合、マウスの中ボタンの値は 0 です
* document.down を使用する場合、マウス ボタンの値は左から右に 1、2、異なるキーに応じて 3 * Chrome では、ev .wheelDelta を表示します。上は 120、下は -120 です
* FirFox では、addEventListenner() を通じてホイール イベントをマウスに追加し、イベント タイプは DOMMouseScroll です。 ev.detail を使用してください
* 上は 3、下は - 3
*

以上がjsのマウスイベントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。