标签：log 调用 cat event console get bsp doctype 事件处理
事件冒泡：
结构上，（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获：
结构上，（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获向子元素。（自顶向下）
IE没有捕获事件
触发顺序，先捕获，后冒泡
focus, blur, change, submit, reset, select 等事件不冒泡
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a { width: 500px; height: 500px; background-color: #00008B; } .b { width: 400px; height: 400px; background-color: #00FFFF; } .c { width: 300px; height: 300px; background-color: #FFA500; } </style> </head> <body> <div class="a"> <div class="b"> <div class="c"> </div> </div> </div> <script type="text/javascript"> var a = document.getElementsByClassName(‘a‘)[0]; var b = document.getElementsByClassName(‘b‘)[0]; var c = document.getElementsByClassName(‘c‘)[0];
//第三个参数为false, 为冒泡事件 a.addEventListener(‘click‘, function () { console.log(‘aBubble‘) }, false) b.addEventListener(‘click‘, function () { console.log(‘bBubble‘) }, false) c.addEventListener(‘click‘, function () { console.log(‘cBubble‘) }, false)
// 将 false 改为 true , 为捕获事件 a.addEventListener(‘click‘, function () { console.log(‘aCatch‘) }, true) b.addEventListener(‘click‘, function () { console.log(‘bCatch‘) }, true) c.addEventListener(‘click‘, function () { console.log(‘cCatch‘) }, true) </script> </body> </html>
运行代码，点击 c 的输出结果为：
aCatch
bCatch
cBubble
cCatch
bBubble
aBubble
可以看出，是先执行了捕获事件，再执行冒泡事件，而被点击的 对象 c 则按事件的调用顺序执行。
标签：log 调用 cat event console get bsp doctype 事件处理
原文地址：https://www.cnblogs.com/hjysunshine/p/12190166.html
