#转载请留言联系
-
什么是事件冒泡？
事件冒泡，指代在js中，被包含的子标签一旦触发了某种事件，那么父元素的同名事件也会被逐层触发，一直到没有父标签的html标签中。
-
事件冒泡示例
创建一个大的框框，背景色为绿色。然后在大框框里创建一个小框框，背景色为红色。需求是当点大框框的内容时，大框框的背景色变成蓝色。当点小框框的内容时，小框框的背景色变成蓝色。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bigbox{ width: 500px; height: 500px; background: green; } .littlebox{ width: 200px; height: 200px; background: red; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('.bigbox').on('click',function(event){ $(this).css({"background":"blue"}); }) $('.littlebox').on('click',function(event){ $(this).css({"background":"blue"}); }) }) </script> </head> <body> <div class="bigbox"> <div class="littlebox"></div> </div> </body> </html>
实验：当点击大框框时，背景颜色的确变成蓝色了，而且小框框的背景色保持不变，还是红色。但是！当点击小框框时，大框框小框框的背景颜色都变成蓝色了！这边是事件冒泡。子标签一旦触发了某种事件，那么父元素的同名事件也会被逐层触发，一直到没有父标签的html标签中。
-
阻止事件冒泡
1.event.target
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bigbox{ width: 500px; height: 500px; background: green; } .littlebox{ width: 200px; height: 200px; background: red; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('.bigbox').on('click',function(event){ $(event.target).css({"background":"blue"}); }) $('.littlebox').on('click',function(event){ $(event.target).css({"background":"blue"}); }) }) </script> </head> <body> <div class="bigbox"> <div class="littlebox"></div> </div> </body> </html>
2.return false
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bigbox{ width: 500px; height: 500px; background: green; } .littlebox{ width: 200px; height: 200px; background: red; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('.bigbox').on('click',function(event){ $(this).css({"background":"blue"}); }) $('.littlebox').on('click',function(event){ $(this).css({"background":"blue"}); return false; }) }) </script> </head> <body> <div class="bigbox"> <div class="littlebox"></div> </div> </body> </html>
3.stopPropagation
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bigbox{ width: 500px; height: 500px; background: green; } .littlebox{ width: 200px; height: 200px; background: red; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('.bigbox').on('click',function(event){ $(this).css({"background":"blue"}); }) $('.littlebox').on('click',function(event){ $(this).css({"background":"blue"}); event.stopPropagation() }) }) </script> </head> <body> <div class="bigbox"> <div class="littlebox"></div> </div> </body> </html>
-
事件冒泡的意义
那么，事件冒泡有什么意义呢？还只是一个累赘？其实事件冒泡大有用处！
在某种特殊场合下，我们可以通过给父元素添加事件，可以减少批量对子元素添加事件的性能消耗。例如，我们一个ul里面由5000个li，给每一个li添加事件，和给一个ul添加事件，性能的差距是5000倍！
示例（当点击标题是背景变成蓝色，其他标签变回底色）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('.list').on('click',function(event){ $(event.target).css({"background":"blue"}).siblings().css({"background":"white"}); }) }) </script> </head> <body> <ul class="list"> <li>第一个标题</li> <li>第二个标题</li> <li>第三个标题</li> <li>第四个标题</li> <li>第五个标题</li> </ul> </body> </html>