事件流-事件冒泡
事件流
事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候, 那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获。
一、事件冒泡:当子元素的某个事件被触发时,会依次向上触发所有父元素的相 同事件,这种现象叫事件冒泡。
先写三个样式,box1,box2,box3。
选中以上三个元素,给这三个元素添加点击事件,看效果。
结论:当子元素的某个事件被触发时,触发了所有和它有同样行为的所有父元素事件。
阻止事件冒泡:
方法:stopPropagation();
注意:事件冒泡的阻止,是有兼容的,
用方法兼容正常浏览器 stopPropagation();
用属性兼容IE浏览器 cancelBubble = true;
封装成函数如下:
我们给最小的子元素蓝色添加阻止事件冒泡,效果如下图:
结论:
当子元素的某个事件被触发时,会依次向上触发所有父元素的相同事件,这就叫做事件流的事件冒泡。
注意关键字:子元素、依次向上、相同事件。