时间冒泡就是说: 当点击子元素的时候, 父元素或者祖先元素如果也绑定了点击事件, 那么父元素或者祖先元素的事件也会触发响应的事件.
事件传播是从父到子
事件响应是从子到父
示例代码如下:
.fatherfather{
background-color: #80FF00;
width: 200px;
height: 200px;
padding: 40px;
}
.father{
width: 100px;
height: 100px;
background-color: #0094ff;
}
<div class="fatherfather" id="fatherfather">
<div class="father" id="father">
<button id="btn">点击我</button>
</div>
</div>
window.onload = function () {
var fafa = document.getElementById('fatherfather');
var fa = document.getElementById('father');
var b = document.getElementById('btn');
fa.onclick = function(){
console.log("I'm father");
}
btn.onclick = function(event){
var event = event || window.event;
if (event.stopPropagation) { // 普通浏览器取消事件冒泡
console.log(1);
event.stopPropagation();// 阻止事件传播
} else { // IE 取消时间冒泡
console.log(2);
event.cancelBubble = true;// 取消冒泡
}
console.log("I'm btn");
}
fafa.onclick = function () {
console.log('fafa');
}
document.onclick = function () {
console.log('document');
}
}
