ホームページ > 記事 > ウェブフロントエンド > 一般的な JavaScript イベントタイプの最新コレクション

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

php是最好的语言オリジナル: 2018-08-10 17:21:112378ブラウズ

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 イベントタイプの最新コレクション