2、关于事件的冒泡行为

来源：互联网发布：mac怎么安装webpack 编辑：程序博客网时间：2024/06/03 17:18

1、事件的冒泡行为

冒泡呢，简单的意思就是，你本来想只触发一个事件，但是实际上却出发了N个事件。

举例来说，有一个元素，如Span，你绑定了一个Click函数；你又为Div绑定了一个Click函数；而这个Span就在Div中，当你点击Span时，同时就会触发Span和Div的Click函数，这就是事件冒泡。

event.stopPropagation()的作用跟event.cancleBubble()是一样的，都是用来阻止浏览器默认的事件冒泡行为。

2、事件冒泡的小案例

2.1 html的代码

<head><meta charset="UTF-8"><title>事件的冒泡行为</title><style type="text/css">#mydiv {border: 1px solid red;width: 100px;height: 100px;}#myspan {border: 1px solid red;width: 30px;height: 30px;position: relative;left: 20px;top: 30px;}</style></head><body><div id="mydiv"><span id="myspan">我是span</span></div></body></html>

2.2 Javascript代码

<script type="text/javascript">window.onload = function() {var my<span style="font-family: SimSun;">span</span><span style="font-family: SimSun;">= document.getElementById('myspan');</span>myspan.onclick = function() {/*alert('我是span');*/console.log('我是span');}var mydiv = document.getElementById('mydiv');mydiv.onclick = function() {/*alert('我是div');*/console.log('我是div');}}</script>

2.3 关于事件的冒泡

当点击span区域时,会触发span的click函数和div上的click函数

3、阻止事件的冒泡传播

3.1 JavaScript阻止事件冒泡的方法,event.stopPropagation()

<script type="text/javascript">window.onload = function() {var myspan = document.getElementById('myspan');myspan.onclick = function(event) {event = event || e;alert('我是span');console.log('我是span');//阻止时间的冒泡传播event.stopPropagation();                               //组织事件冒泡的传播                               event.cancleBubble=true;}var mydiv = document.getElementById('mydiv');mydiv.onclick = function(event) {alert('我是div');console.log('我是div');}}</script>

1 0