事件冒泡
当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。
简单来说就是点击子级,子级的事件会从子级一级一级往上传递,绑定点击事件的元素都会被执行
案例
body代码:
<body>
<div id="div">
我是div
<span id="s">我是span</span>
</div>
</body>
css代码:
<style>
#div {
width: 200px;
height: 200px;
background: red;
}
#s {
background: yellow;
}
</style>
js代码:
<script>
// span点击事件
s.onclick = function (event) {
alert('我是span')
// 阻止事件冒泡
var event = event || window.event
// w3c方法 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
// event.stopPropagation();
// ie方法 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
// event.cancelBubble = true
}
// div点击事件
div.onclick = function () {
alert('我是div')
}
// body点击事件
document.body.onclick = function () {
alert('我是body')
}
</script>
加油吧骚年!