イベントとは: イベントとは、js 内で発生する可能性があり、監視されるすべてのイベントを指します。 (マウス、キーボード、ブラウザ ウィンドウの変更など)
イベントオブジェクト（イベント）とは： 平たく言えば、イベントに関するさまざまな情報を記録するオブジェクトです。
ここで注意する必要があるのは、イベント オブジェクトには互換性の問題があるということです。IE 以外のブラウザではイベント オブジェクトですが、ブラウザ以外では window.event になります。
btn.onclick = function(event){let e = window.event}イベントソースオブジェクト簡単に言うと、イベントが発生した特定のオブジェクトを指します。要素要素の場合、イベント ソース オブジェクトはクリックした要素を指します。ブラウザの互換性の問題もあります。
イベントストリーム
イベントフローは主に 2 つのカテゴリに分けられます。 1. イベントのキャプチャ 2. バブリング イベントの発生順序は、最初にキャプチャ、次にバブリングです。ただし、細分化すると、バブリング ステージをキャプチャした後にターゲット ステージが存在します。実行される操作の具体的に操作される DOM 要素です。
イベントをキャプチャする
最上位のノードは最初にイベントを受信し、それを下位の特定のノードに伝播します。例: ユーザーが p 要素をクリックしてイベント キャプチャを使用すると、クリック イベントは document>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 = 関数(イベント){
let e = イベント window.event
console.log(e.target.innerHTML)
}イベントバブリング防止動作（互換書き込み）
***一部のイベントはバブリング操作を必要としません
関数 stopBubble(event){
var e =event||window.event //イベントオブジェクト互換の書き込みメソッド e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE互換の書き込みメソッド}デフォルトイベントをブロック（互換性のある書き込み方法）
***タグとマウスの右ボタンのデフォルトのジャンプおよびメニューイベントをブロックします。
関数 cancelHandle(event){
var e = イベント||window.event
e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}関連する推奨事項: [JavaScript ビデオ チュートリアル]
上記は、js のイベント オブジェクト、イベント ソース オブジェクト、イベント ストリームの詳細な説明です。詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。
