<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
100px;
height: 100px;
background-color: yellowgreen;
/*
* 要设置偏移量left，top，要开启绝对定位
*/
position: absolute;
}
#box2{
500px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box1">
我是box1
</div>
<div id="box2">
我是box2
<ul id="allA">
<li><a href="javascript:;" class="link">超链接1</a></li>
<li><a href="javascript:;" class="link">超链接2</a></li>
<li><a href="javascript:;" class="link">超链接3</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
/*事件的冒泡(bubble)
* 指事件的向上传导，子元素的事件响应，祖先元素的相同事件也响应
* 如：#box1跟随鼠标移动可以到#box2中会冒到document中实现
*/
//#box1跟随鼠标移动
var box1=document.getElementById("box1");
document.onmousemove=function(event){
//解决兼容性问题
event=event||window.event;
//css设置偏移量，坐标设置
//clientX是相对可见窗口的坐标，有滚动条的时候雨div相对页面的坐标不对应，此时要有pagex
box1.style.left=event.pageX+"px";
box1.style.top=event.pageY+"px";
}
/*取消冒泡
*/
var box2=document.getElementById("box2");
box2.onmousemove=function(event){
event.cancelBubble=true; //移动不到box2中了
}
//事件的委派
//利用冒泡，只在祖先元素绑定一次事件，而实现一堆子元素的相同事件
var allA=document.getElementById('allA');
allA.onclick=function(){
//如果触发事件对象是期望元素的得是则执行，否则不执行，这里li就会执行，但是我们要a执行
//event.target判断对象
if(event.target.className=='link'){
alert("超链接");
}
}
</script>
</html>