jsでのイベントオブジェクト、イベントソースオブジェクト、イベントストリームの詳しい説明

イベント オブジェクト、イベント ソース オブジェクト、js でのイベント フロー分析と理解

イベント オブジェクト (イベント)

• # #イベントとは: イベントとは、js で発生する可能性があり、次のような監視対象となるすべてのイベントを指します: (マウス、キーボード、ブラウザ ウィンドウの変更など)

• イベントとはオブジェクト（イベント）：平たく言えば、イベントに関するさまざまな情報を記録するオブジェクトです。
  ここで注意する必要があるのは、イベント オブジェクトには互換性の問題があるということです。IE 以外のブラウザではイベントですが、それ以外のブラウザでは window.event、

btn.onclick = function(event){let e = event || window.event}

イベント ソース オブジェクト

簡単に言えば、イベントがそのオブジェクト上で特別に発生することを意味します。イベント ソース オブジェクトは、クリックした要素を参照します。ブラウザの互換性の問題もあります。

• fireFox では、event.srcElement
• IE では、event.target
  互換性のある書き込みメソッドについては、イベント オブジェクトを参照してください

イベント フロー

イベント フローは主に 2 つのカテゴリに分類されます。 1. イベントのキャプチャ 2. バブリング イベントのトリガー順序はキャプチャです。最初にバブル
ただし、細分化すると、バブリングステージをキャプチャするときにターゲットステージ、つまり特定の DOM 要素を操作するための操作ステージが存在します

Capture events

最上位のノードは最初にイベントを受信し、それを下位の特定のノードに伝播します。例: ユーザーが p 要素をクリックしてイベント キャプチャを使用すると、クリック イベントはドキュメント > htm > body > p の順序で伝播されます。感染経路は外部から内部へです。

バブル イベント

キャプチャ イベントとは逆に、内側から外側に渡されます。ユーザーが p をクリックすると、親である p>body> に渡されます。 ;html 。 ***この機能はイベントの委任によく使用されるためです。

イベント デリゲート

すべての子要素によってトリガーされる同じイベントを親要素にバインドします。これにより、DOM 操作が軽減され、パフォーマンスが向上します。具体的な使用方法は、イベントソースオブジェクトメソッドを使用します。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

クリック イベントを li にバインドするには、通常、クリック イベントを li

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("i")
            }
        }

にループする方法があり、イベント委任を使用する方法は

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

## です。 # 利点
• パフォーマンスが向上し、すべての要素をループしてイベントを 1 つずつバインドする必要がなくなりました。
• 柔軟で、動的に作成された新しい要素には、イベントの再バインドは必要ありません。

イベントのバブリングを防止し、デフォルトのイベントを防止する

イベントのバブリングを防止する操作 (互換性の書き込み)

***一部のイベントはバブリング操作を必要としません

function stopBubble(event){
    var e = event||window.event //事件对象兼容写法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法}

デフォルトのイベントをブロックします (互換性のある書き込み)

***タグと右マウスをブロックしますボタンのデフォルトのジャンプおよびメニュー イベント

function cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

関連する推奨事項: [

JavaScript ビデオ チュートリアル ]

以上がjsでのイベントオブジェクト、イベントソースオブジェクト、イベントストリームの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。