第8章JS-Web-API-Event
3.無限のドロップダウン画像リストの各画像のクリックを監視するにはどうすればよいですか？
タイトル
- 一般的なイベントリスナー関数を記述する
- イベントのバブリングのプロセスを説明する
- 無限のドロップダウン画像リスト、各画像のクリックを監視する方法は？
知識ポイント
- イベントバインディング
- イベントバブリング
- イベントエージェント
1つは、イベントバインディング
通用的事件绑定函数
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
const p1 = document.getElementById('p1')
bindEvent(p1, 'click', event => {
event.stopPropagation() // 阻止冒泡
console.log('激活')
})
const body = document.body
bindEvent(body, 'click', event => {
console.log('取消')
// console.log(event.target)
})
const div2 = document.getElementById('div2')
bindEvent(div2, 'click', event => {
console.log('div2 clicked')
console.log(event.target)
})トリガー要素を取得します。event.targetは、イベントをトリガーした要素を出力します。
第二に、イベントバブリング
機能：アクティブ化/非アクティブ化状態の切り替え（キャンセルイベントを本体にバインドし、アクティブ化イベントをp1にバインド）
ネストされたイベントの出力の順序：バブリング、DOM構造のバブリング
イベントのバブリングを防止しない場合は、p1をクリックして出力します。アクティベーションのキャンセル（ボディの出力キャンセルへのキャンセル）
バブリングを停止：stopPropagation（）
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
<script src="./event.js"></script>
</body>3.イベントエージェント
イベントプロキシは、イベントバブリングのメカニズムの下で実行されます。
1.シーン：滝の流れ
2.説明の例
クリックしてタグを追加すると、さまざまな方法で無限に読み込まれる可能性があるため、div内にタグがいくつあるかわからないため、イベントを1つずつバインドすることはできないため、この時点でイベントをdivにバインドできます。タグがクリックされたときとき、それはバブリングメカニズムを介してdivに移動し、いくつかのメソッドを介してaタグを取得します。つまり、数値が比較的大きいか複雑で、イベントをバインドできない場合、イベントをその親要素にバインドできます。
<div id="div3">
<a href="#">a1</a><br>
<a href="#">a2</a><br>
<a href="#">a3</a><br>
<a href="#">a4</a><br>
<button>加载更多...</button>
</div>// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', event => {
event.preventDefault() // 阻止默认行为（页面页面调转）
const target = event.targrt
if (target.nodeNamr === 'A') {
alert(target.innerHTML)
}
})デフォルトの動作を防ぐ：event.preventDefault（）
3.イベントプロキシの利点
- コードの概要（各タグを分析すると、構造がより複雑になり、ループする必要があります）
- ブラウザーのメモリ使用量を削減します（さらにタグがある場合は、それぞれがメモリを消費するイベントリスナーにバインドされます）。
（しかし、それを乱用しないでください）
4.一般的なイベントバインディング機能
要件：通常の監視をサポートできる、エージェントの状況の監視もサポートできる
function bindEvent(elem, type, selector, fn) { // selector是个css选择器
if (fn == null) { // 判断只传入三个参数
fn = selector
selector = null
}
elem.addEventListener(type, event => {
const target = event.target
if (selector) {
// 有selector时是代理绑定
if (target.matches(selector)) { // 判断DOM元素是否符合css选择器
fn.call(target, event)
}
} else {
// selector为空，只有三个参数，是普通绑定
fn.call(target, event)
}
})
}
// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) { // 注意不能使用箭头函数，否则获取的是上级window
// console.log(event.target) // 获取触发的元素
event.preventDefault()
alert(this.innerHTML) // this
})
// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
event.preventDefault() // 阻止默认行为（页面页面调转）
alert(this.innerHTML) // 如果使用箭头函数的写法 event.target.innerHTML
})4.質問の回答
1.一般的なイベント監視機能を記述しますか？
考慮が必要：通常のバインディングプロキシバインディング
2.イベントバブリングのプロセスを説明してください。
データバブリングはDOMツリー構造に基づいています。
時間はトリガー要素に沿って泡立つ
アプリケーションシナリオ：プロキシ
3.無限のドロップダウン画像リストの各画像のクリックを監視するにはどうすればよいですか？
イベントエージェント
event.targetを使用してトリガー要素を取得する
一致を使用して、要素がトリガーされているかどうかを判断する
V.まとめ
- イベントバインディング
- イベントバブリング
- イベントエージェント
- 一般的なイベントバインディング機能
