一般的な JavaScript イベント タイプの最新コレクション

UI (ユーザーインターフェイス) Event、ユーザーがページ上の要素を操作するとトリガーされます

Load イベント: ページが完全に読み込まれると、ウィンドウ上の読み込みイベントがトリガーされます。

Unload イベント: ドキュメントが完全にアンロードされた後にトリガーされます。ユーザーがあるページから別のページに切り替えるたびに発生します。

サイズ変更イベント: ブラウザーが新しい高さまたは幅に調整すると、サイズ変更イベントがトリガーされます。パフォーマンスの問題を避けるために、このイベントに計算ロジックを追加しないように注意してください。

        EventUtil.addHandler(window, "resize", function (event) {
                //防抖函数
                //每次调用函数都会清除之前的计数器，并重新计数，计数完成时，执行操作。
            var timer;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () { //setTimeout返回唯一标识符，可以使用它来取消计数器
                    console.log("123");
                },500);
            }
        }());//此处的双括号表示，立即调用返回值

Scroll イベント: ユーザーがフロー バーを使用して要素内のコンテンツをスクロールすると、要素上でトリガーされます。

        EventUtil.addHandler(window, "scroll", function (event) {
            //函数节流
            var timer;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () { //setTimeout返回唯一标识符，可以使用它来取消计数器
                    if (document.compatMode == "CSS1Compat") {
                        //标准模式
                        console.log("Left:" + document.documentElement.scrollLeft);
                        console.log("Top:" + document.documentElement.scrollTop);
                    }
                    else {
                        //混杂模式
                        console.log("Left:" + document.body.scrollLeft);
                        console.log("Top:" + document.body.scrollTop);
                    }
                }, 500);
            }     
        }());

Focus イベント、ページがフォーカスを獲得または失ったときにトリガーされます。

Blur イベント: 要素がフォーカスを失ったときにトリガーされます。このイベントはバブルしません。すべてのブラウザーがサポートしています。

Focus イベント: 要素がフォーカスを取得するとトリガーされます。このイベントはバブルアップせず、すべてのブラウザーがサポートします。

Focusin イベント: 要素がフォーカスを取得したときにトリガーされます。 このイベントは HTML イベントのフォーカスと同等ですが、このイベントをサポートするブラウザは IE5+ safari5.1+ Opera11.5+ および Chrome です。

Focusout イベント: 要素が失われたときにトリガーされます。 このイベントは、HTML イベント ブラーのユニバーサル バージョンです。このイベントをサポートするブラウザは、IE5+ safari5.1+ Opera11.5+ および Chrome です。

マウスとホイール イベント

クリック イベント: ユーザーが左をクリックしたとき。マウス ボタン、または Enter キーが押されたときに起動されます。

DbClick イベント: ユーザーがマウスの左ボタンをダブルクリックするとトリガーされます。

MouseDown イベント: ユーザーがマウス ボタンを押すとトリガーされます。

MouseEnter イベント: マウスが初めて外側から要素範囲内に移動したときにトリガーされます。

MouseLeave イベント: マウスが要素の範囲外に移動するとトリガーされます。

MouseMove イベント: マウス ポインターが要素内を移動すると繰り返し発生します。

MouseOut イベント: マウス ポインターが要素の上にあり、ユーザーがそれを別の要素に移動すると発生します。

MouseOver イベント: マウス ポインターが要素の外にあり、ユーザーが初めてマウス ポインターを別の要素の境界内に移動したときに発生します。

MouseUp: ユーザーがマウス ポインターを放したときにトリガーされます。

いくつかのマウス座標位置:

1. クライアント領域の座標位置

マウス イベントはすべて、ブラウザーのビューポート内の特定の位置で発生します。この位置は、イベント オブジェクトの clientX プロパティと clientY プロパティに保存されます。

2. ページ座標位置

pageX と pageY は、ページ上のどこでイベントが発生したかを示します。つまり、これら 2 つのプロパティはページ内のカーソルの位置を表すため、座標はビューポートの左端または上端からではなく、ページ自体から計算されます。

ページがスクロールされていない場合、pageX および pageY は clientX および clientY と同じになります。

IE8 以前のバージョンではページ座標位置をサポートしていませんが、クライアント領域の座標位置とスクロール情報を使用して計算できます。

        EventUtil.addHandler(document.getElementById("p1"), "click", function (event) {
            //兼容IE8及之前版本
            event = EventUtil.getEvent(event);
            var pageX = event.pageX,
                pageY = event.pageY;
            if (pageX === undefined) {
                pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
            }
            if (pageY === undefined) {
                pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
            }
            //console.log("pageX:" + pageX);
            //console.log("pageY:" + pageY);
        });

3. 画面座標位置

screenX および screenY 属性は、マウスイベントが発生したときの画面全体に対するマウスポインターの座標情報を決定できます。

関連する推奨事項:

JavaScript でエラーが発生しやすい一般的な知識ポイントのまとめ

JavaScript のイベント ストリームとイベント ハンドラーの詳細な解釈 (グラフィック チュートリアル)

以上が一般的な JavaScript イベント タイプの最新コレクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。