事件委托主要用於一個父容器下麵有很多功能相仿的子容器，這時候就需要將子容器的事件監聽交給父容器來做。父容器之所以能夠幫子容器監聽其原理是事件冒泡，對於子容器的點擊在冒泡時會被父容器捕獲到，然後用e.target來判斷到底是哪個子容器觸發了事件 示例代碼： 點擊第二個li，console輸出<li>2 ...
事件委托主要用於一個父容器下麵有很多功能相仿的子容器，這時候就需要將子容器的事件監聽交給父容器來做。父容器之所以能夠幫子容器監聽其原理是事件冒泡，對於子容器的點擊在冒泡時會被父容器捕獲到，然後用e.target來判斷到底是哪個子容器觸發了事件
示例代碼：
<html>
<head></head>
<body>
<ul id="myul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.getElementById("myul")
ul.addEventListener('click',function(e){
alert("選中了："+e.target.innerHTML)
console.log(e.target)
})
</script>
</html>
點擊第二個li，console輸出<li>2</li>從console的輸出我們可以判斷出e.target返回的是觸發事件的element類型
然後我們看看這個事件委托會不會冒泡
<html>
<head></head>
<body>
<div id="mydiv">
<div>
234
<p>123</p>
</div>
</div>
</body>
<script type="text/javascript">
var div = document.getElementById("mydiv")
div.addEventListener('click',function(e){
alert("選中了："+e.target.innerHTML)
console.log(e.target)
})
</script>
</html>
點擊p，發現只有p的事件觸發了，上一級的父組件並沒有被輸出，所以事件委托中e.target就單指那個被點擊的組件
最後試一下stopPropagation會不會阻止委托的父元素接收事件
<html>
<head></head>
<body>
<ul id="myul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.getElementById("myul")
ul.addEventListener('click',function(e){
alert("選中了："+e.target.innerHTML)
console.log(e.target)
})
document.getElementsByTagName("li")[0].addEventListener('click',function(e){
e.stopPropagation()
})
</script>
</html>
由於阻斷了了事件冒泡，所以點擊第一個li沒有反應。
