js事件委托
Posted web-前端工程师
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js事件委托相关的知识,希望对你有一定的参考价值。
事件委托主要用于一个父容器下面有很多功能相仿的子容器,这时候就需要将子容器的事件监听交给父容器来做。父容器之所以能够帮子容器监听其原理是事件冒泡,对于子容器的点击在冒泡时会被父容器捕获到,然后用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没有反应。
以上是关于js事件委托的主要内容,如果未能解决你的问题,请参考以下文章