練習後の理解を深める
1つ：イベントフロー
次のイベントフローチャートの理解
2：イベントの委任
イベント委任の原則
- 同じタイプのイベントが多数ある場合は、イベントストリームの配信プロセスを使用して、イベント応答ロジックをすべてのイベントターゲットの共通の祖先ノードにバインドできます。同時に、イベントオブジェクト.targetを使用して特定のイベントターゲットノードを取得し、イベントターゲットのコンテンツを取得します。
イベント委任の利点
- イベント処理ロジックは、各イベントターゲットではなく、祖先ノードにバインドされるため、子ノードの数を管理したり、子ノードを動的に追加したりする代わりに、イベントを祖先ノードに1回登録するだけで済みます。
練習プロセス
1つ：イベントのキャプチャとイベントのバブリング
テストコードは次のとおりです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<style type="text/css">
#outer{
width: 150px;height: 150px;background-color: red;}
#inner{
width: 80px;height: 80px;background-color: green;}
</style>
</head>
<body>
<div id="outer">outer box
<div id="inner">inner box</div>
</div>
<script type="text/javascript">
let inner = document.getElementById('inner');
let outer = document.getElementById("outer");
let body = document.getElementsByTagName("body")[0];
let nodeArr = [inner,outer,body,document,window];
let tipsArr = ["inner","outer","body","document","window"];
nodeArr.forEach((ele,index)=>{
ele.addEventListener('click',(e)=>{
console.log(`${
tipsArr[index]} click 捕获`);
},true);
ele.addEventListener('click',(e)=>{
console.log(`${
tipsArr[index]} click 冒泡`);
},false);
});
</script>
</body>
</html>
操作結果（内側をクリック）
細かい点：ターゲットオブジェクトイベントのキャプチャとバブリングは、キャプチャイベント/バブリングイベントの実行順序に関連しています[テストは次のとおりです]
- キャプチャ/バブリングイベント登録の順序を調整します
nodeArr.forEach((ele, index)=> {
ele.addEventListener('click', (e)=> {
console.log(`${
tipsArr[index]} click 冒泡`);
}, false);
ele.addEventListener('click', (e)=> {
console.log(`${
tipsArr[index]} click 捕获`);
}, true);
});
- 操作結果（内側の領域をクリックします。つまり、ターゲットオブジェクトイベントは内側のキャプチャとバブリングです）
キャプチャ/バブルインターセプト
- イベント登録コード、イベントインターセプトを追加します（次の例はバブリングをインターセプトします）
nodeArr.forEach((ele, index)=> {
ele.addEventListener('click', (e)=> {
console.log(`${
tipsArr[index]} click 捕获`);
}, true);
ele.addEventListener('click', (e)=> {
console.log(`${
tipsArr[index]} click 冒泡`);
e.stopPropagation();
}, false);
});
- 運用結果
2：イベント委任（エージェント）
テストコードは次のとおりです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<style>
ul{
float: left;
}
</style>
</head>
<body>
<ul>
<li><button>one</button></li>
<li><button>two</button></li>
<li><button>three</button></li>
<li><button>four</button></li>
<li><button>five</button></li>
</ul>
<script>
let ul = document.getElementsByTagName('ul')[0];
ul.addEventListener('click', (e)=> {
let btn = e.target;
console.log(btn.textContent);
}, true);
function addLi(text){
let li = document.createElement('li');
let btn = document.createElement('button');
btn.textContent = text;
li.appendChild(btn);
ul.appendChild(li);
}
</script>
</body>
</html>
運用結果
