事件冒泡:有同一父元素 点击子元素 由内向外触发
事件捕获:有同一父元素,点击子元素,由外向内触发
使用场景:ul下的li 给ul绑定事件对li进行触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>冒泡和捕获</title> <style type="text/css"> #parent{ 300px; height: 200px; background: yellow; margin: 0 auto; } #child{ 100px; height: 100px; background:blue ; margin: 0 auto; } </style> </head> <body> <div id="parent"> <div id="child"></div> </div> <script type="text/javascript"> // 冒泡 document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被触发"); }) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被触发") }) //捕获 document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被触发") },true) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被触发") },true) </script> </body> </html>