JS冒泡事件与事件捕获实例详解

本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下：

案例

  
  


  点我

小结

1.点击myDiv。依次是Div-Body-Html-document-Window

2.点击其他空白地方。依次是Html-document-Window

3.连续点击两次，会按顺序执行两次

4.冒泡的前提是，父级也定义了相应的事件

再看一个更复杂的例子

  
  
  


  点我

小结

1.点击的执行结果是

Window - true

document - true

Html - true

Body - true

Div - true

Div - false

Div - click

Body - false

Body - click

Html - false

Html - click

document - false

document - click

Window - false

Window - click

2.顺序与js代码顺序无关

3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到

再次改造，阻止冒泡

  
  
  


  点我

小结

Window - true

document - true

Html - true

Body - true

Div - true

Div - false

Div - click

终止了，没有后续的内容了

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript事件相关操作与技巧大全》、《Javascript时间与日期操作技巧总结》、《Javascript切换特效与技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。