事件冒泡是什么以及怎么规避事件冒泡(转)

参考链接:https://baike.baidu.com/item/%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1/4211429

当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。

什么是事件冒泡

编辑

页面上有好多事件,也可以多个元素响应一个事件.假如:

1

2

3

4

5

6

7

上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是:a --> div --> body 。a冒泡到div冒泡到body。

事件冒泡引发的问题

编辑

本来在上面的代码中只想触发元素的onclick事件,然而

,事件也同时 触发了。因此我们必须要对事件的作用范围进行限制。当单击元素的onclick事件时只触发本身的事件。由于IE- DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递,我们可以用 event.stopPropagation()阻止事件的传递行为.

stopPropagation阻止事件冒泡实现

编辑

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28