實踐後加深的理解
一：事件流
對下事件流程圖的理解
![在這裏插入圖片描述]()
二：事件委託
事件委託原理
- 大量同類型事件時，可以利用事件流的傳遞過程，將事件響應邏輯綁定在所有事件目標共同的祖先節點上，同時使用事件對象.target可以獲取具體的事件目標節點進而獲取事件目標的內容。
事件委託優點
- 由於事件處理邏輯綁定在祖先節點而不是各個事件目標上，那麼只需在祖先節點註冊一次事件即可，而不用管子節點有多少個，或者子節點的動態添加。
實踐過程
一：事件捕獲和事件冒泡
測試代碼如下
<!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>
運行結果（點擊inner區域）
![在這裏插入圖片描述]()
小細節：目標對象事件的捕獲與冒泡與捕獲事件/冒泡事件的執行順序有關【測試如下】
nodeArr.forEach((ele, index)=> {
ele.addEventListener('click', (e)=> {
console.log(`${tipsArr[index]} click 冒泡`);
}, false);
ele.addEventListener('click', (e)=> {
console.log(`${tipsArr[index]} click 捕獲`);
}, true);
});
- 運行結果（點擊inner區域，也即目標對象事件爲inner的捕獲與冒泡）
![在這裏插入圖片描述]()
捕獲/冒泡攔截
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);
});
- 運行結果
![在這裏插入圖片描述]()
二：事件委託（代理）
測試代碼如下
<!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>
運行結果
![在這裏插入圖片描述]()
