<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: green;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload=function(){
//box1绑定单机响应函数
var box1=document.getElementById("box1")
box1.onclick=function(){
event=event||window.event
//取消冒泡
event.cancelBubble=true;
alert("box1")
};
var box2=document.getElementById("box2")
box2.onclick=function(){
alert("box2")
event=event||window.event
//取消冒泡
event.cancelBubble=true;
}
document.body.onclick=function(){
alert("body")
}
//结果：点击box2时，其祖辈的事件都被执行，
/*
* 事件冒泡：事件会像上传到，后代元素的事件会传到祖先的相同事件
* 取消没冒泡：可以通过事件对象来取消冒泡。
*
*/
}
</script>
<body>
<div id="box1">
我是box1
<div id="box2">
我是box2
</div>
</div>
</body>
</html>
699
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
