事件案例

 

事件冒泡实例

一个按钮，一个div，点击这个按钮，显示div。

点击文档空白处，隐藏div。你可能会这样写：

 

给按钮设置一个事件，让按钮展示div。

给文档添加一个事件，让文档隐藏div。

问题来了，点击按钮，你会发现，div并没有出现，其实div是出现了，只是div出现了之后，由于document也有一个onclick事件，由于时间冒泡的机制，所以document也会被触发。

【注意，如果document没有onclick事件，那么不会被触发，也就是收，事件冒泡只会触发同类事件】

这种设置在顶层【如document】的事件，要十分注意，因为事件冒泡是默认存在的，所以一不小心就会写出bug。

 

问题根源：触发显示的时候，由于冒泡机制的存在，进而触发了document的事件

 

解决之道

给事件源头的Even对象，设置一个属性即可阻止其冒泡：

 

【注意：阻止事件冒泡、阻止事件默认行为，是两个不同概念】

 

 

给最外层的div统一加上一个点击事件，当你点击了这个div下面的所有子元素时，会触发一个冒泡

外层的div可以通过target来获取到，是哪个子元素的点击事件。

这种情况非常适合于，子元素的内容极多，且未知的情况下。

如下：我们直接给div1加上一个点击事件，利用事件冒泡的机制来做这件事情。