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

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

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5960221.html，如需转载请自行联系原作者