<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function(){
//我真的累了
//事件的冒泡*****************************************************
//绑定事件
//如果是在head中不要把js写在window.onload方法外无法起作用
var box1=document.getElementById("box1");
var box1_span=document.getElementById("box1_span");
box1_span.onclick=function(event){
alert("span!");
//我们不希望时间传递
// 那就必须将事件捕获
//事件的捕获分为window.event与event是不同的浏览器决定的
//我只看谷歌
/// event.cancelBubble=true;//此方法可以取消事件的向下传递
}
box1.onclick=function(){
alert("盒子!");
}
document.body.onclick=function(){
alert("文档!");
}
//总体来说他是默认你点击了一个元素这个点击事件会传递给父元素一直到document.body
}
</script>
</head>
<body>
<div id="box1"style="width:700px; height:600px;margin: 0 auto; background-color:gold;">
div
<span id="box1_span" style="width:80px; height:80px; background-color:grey;">span</span>
</div>
</body>
</html>
|