イベント依頼(代理)

定義(複数の異なる定義)

一般的には、イベント依頼は、要素応答イベント(click、keydown)の関数を別の要素に委託することである.

簡単に言えば、イベント依頼はJavaScriptイベントの泡が発生する特性を利用して、内部要素のイベントを外部要素に委託(バインディング)して処理することである.

一般的には、イベント依頼は、1つまたは複数の要素のイベントを、親層要素またはより外側の要素に委託(結合)し、本当にバインディングされたイベントは、外層要素であり、イベントがバインディングを必要とする要素に応答すると、イベント発泡機構を通じて、その外層要素のバインディングイベントをトリガする.そして、外層要素の上で関数を実行します.

1、一般的な書き方(イベント依頼を使用しない)

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

<button id="btn">  button>

//          
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");

//                
for (let i = 0; i < oLi.length; i++) {
     
	oLi[i].onclick = function() {
     
		console.log(oLi[i].innerText);
	};
};

//    id        
let btn = document.getElementById("btn");

//          
btn.onclick = function() {
     
	//      li
	let aLi = document.createElement("li");

	//   li   
	aLi.innerHTML = `li ${
       oLi.length+1}  `;

	//           
	aLi.onclick = function() {
     
		console.log(aLi.innerText);
	};

	//   li       
	oUl.appendChild(aLi);
};

締め括りをつける
上のコードから見ることができます.forループで対応するliにクリックイベントを追加します.一つずつ追加すると、dom操作がもう一回できます.ボタンを押して、全部で5回クリックします.新しいli元素を追加する時に、新しいli元素にクリックイベントを追加します.これはきっと煩わしいです.そしてdom操作の回数は最適化されていません.明らかにページのli要素が多い時、性能は影響されます.
2、イベント依頼の書き方

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

<button id="btn">  button>

//          
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");

//     ul       
oUl.onclick = function(ev) {
     
	// ev        
	ev = ev || window.event;

	//    ev     target              
	//        ：       
	let target = ev.target || ev.srcElement;

	//       
	// target.nodeName.toLowerCase()        
	//    
	if (target.nodeName.toLowerCase() == "li") {
     
		console.log(target.innerText);
	};

	//    
	console.log(target.innerText);
};

//    id        
let btn = document.getElementById("btn");

//          
btn.onclick = function(ev) {
     
	//    li   
	let aLi = document.createElement("li");

	//   li   
	aLi.innerHTML = `li ${
       oLi.length+1}  `;

	//      li      ul  
	oUl.appendChild(aLi);
};

締め括りをつける
上のコードと普通の書き方を比較して、明らかにイベント依頼の書き方をより簡潔にして、コード量を減らすだけではなく、dom操作回数を減らして、性能の最適化を実現します.