111 事件对象
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
areaDiv.onmousemove = function(event){
event = event || window.event;
var x = event.clientX;
var y = event.clientY;
showMsg.innerHTML = "x = " + x + ",y = " + y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
112 div跟随鼠标移动
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
<!--开启绝对定位才能使用偏移量-->
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
document.onmousemove = function(event){
event = event || window.event
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
var box2 = document.getElementById("box2");
box2.onmousemove = function(event){
event = event || window.event;
event.cancelBubble = true;
};
};
</script>
</head>
<body style="height: 1000px; width: 2000px;">
<div id="box2" style="height: 500px; width: 500px; background-color: #bfa;"></div>
<div id="box1"></div>
</body>
</html>
113 冒泡
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1 {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var s1 = document.getElementById(s1);
s1.onclick = function(event){
event = event || window.event;
alert("我是span的单击响应函数");
event.cancelBubble = true;
};
var box1 = document.getElementById(box1);
box1.onclick = function(event){
event = event || window.event;
alert("我是div的单击响应函数");
event.cancelBubble = true;
};
body.onclick = function(){
alert("我是body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span>我是span</span>
</div>
</body>
</html>
114 事件的委派
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var ul = document.getElementById("ul");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
ul.appendChild(li);
};
var allA = document.getElementsByTagName("a");
for(var i = 0; i < allA.length; i++){
allA[i].onclick = function(){
alert("我是a的单击响应函数");
};
}
ul.onclick = function(event){
event = event || window.event;
alert(event.target);
if(event.target.className == "link"){
alert("我是ul的单击响应函数");
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li>
<li>
<p>我是p元素</p>
</li>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
</html>
115 事件的绑定
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
alert(1);
};
btn01.onclick = function(){
alert(2);
};
btn01.addEventListener("click", function(){
alert(this);
alert(1);
}, false);
btn01.addEventListener("click", function(){
alert(2);
}, false);
btn01.attachEvent("onclick", function(){
alert(this);
alert(1);
});
btn01.attachEvent("onclick", function(){
alert(2);
});
btn01.attachEvent("onclick", function(){
alert(3);
});
function bind(obj, eventStr, callback){
if(obj.addEventListener){
obj.addEventListener(eventStr, callback, false);
}else{
obj.attachEvent("on" + eventStr, function(){
callback.call(obj);
});
}
}
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>