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

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

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

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

        EventUtil.addHandler(window, "resize", function (event) {
                //防抖函數
                //每次調用函數都會清除之前的計數器，并重新計數，計數完成時，執(zhí)行操作。
            var timer;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () { //setTimeout返回唯一標識符，可以使用它來取消計數器
                    console.log("123");
                },500);
            }
        }());//此處的雙括號表示，立即調用返回值

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

        EventUtil.addHandler(window, "scroll", function (event) {
            //函數節(jié)流
            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 サイトの他の関連記事を參照してください。