目录
事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标，键盘的按下那个按键，
处理兼容性问题
<script type="text/javascript">
window.onload = function(){
//onmousemove在鼠标移入时触发
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
//
areaDiv.onmousemove = function(event){
//处理兼容性问题
/*if(!event){
event = window.event
}*/
event = event || window.event;
//clientX获得鼠标的水平坐标
var x = event.clientX;
var y = event.clientY;
showMsg.innerHTML = "x="+x+",y="+y;
//ie8以以下浏览器中
//var x = window.event.clientX;
//var y = window.event.clientY;
}
}
</script>div跟随鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: cornflowerblue;
/*开启定位*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
//div跟随鼠标移动
var box1 = document.getElementById("box1");
document.onmousemove = function(event){
//获取鼠标的坐标可见窗口的坐标
//兼容问题
event = event || window.event;
//page相对页面的位置 ----->ie8不可用
//client相对窗口的位置
var left = event.pageX;
var top = event.pageY;
//设置div的偏移量
//滚动条的距离
//
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
box1.style.left = left +sl+"px";
box1.style.top = top +st+"px";
}
}
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id = "box1">
</div>
</body>
</html>
事件的冒泡
Bubble（事件的冒泡）：事件的向上传导，当事件被响应以后，其父元素的相同的事件也会被触发
可以通过事件对象取消冒泡，将事件对象的cancelable设置为true取消
<script type="text/javascript">
window.onload = function(){
var s1 = document.getElementById("s1");
s1.onclick = function(){
event = event || window.event;
alert("1");
event.cancelable = true;//取消冒泡
};
var box1 = document.getElementById("box1");
box1.onclick = function(){
alert("2");
};
document.body.onclick = function(){
};
};
事件的委派（将事件统一绑定给元素的祖先元素）
后代元素上的事件触发时，会一直冒泡到祖先元素。
只绑定一次事件即可应用的多个的元素上，即使元素是后添加的
减少事件绑定的次数，提高性能
如果触发事件的对象是期望的元素，否则不执行
<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//create a
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
u1.appendChild(li);
}
//为a绑定一个单击响应函数
var allA = document.getElementsByTagName("a");
/*for(var i = 0;i<allA.length;i++){
allA.onclick = function(){
}
}*/
//希望只绑定一次事件即可应用的多个的元素上，即使元素是后添加的
//绑定给共同的父元素
u1.onclick = function(){
//如果触发事件的对象是期望的元素，否则不执行
event=event||window.event;
//event中target表示触发事件的对象
if(event.target.className = "link"){
alert("1");
}
};
};
</script>事件的绑定
addEventListener();绑定响应函数
参数 1事件的字符串 2回调函数 3是否在捕获阶段触发事件
ie8中.attachEvent（）执行顺序是先绑定后执行
<script type="text/javascript">
window.onload = function(){
/*
* 点击按钮以后弹出一个内容
*/
//获取按钮对象
var btn01 = document.getElementById("btn01");
//addEventListener();绑定响应函数------>不支持ie8 ie9以上
//参数1事件的字符串2回调函数3是否在捕获阶段触发事件
//绑定同时为一个元素的相同事件同时绑定多个函数
/*btn01.addEventListener("click",function(){
alert("1");
},false);
btn01.addEventListener("click",function(){
alert("2");
},false);*/
//ie8中
/*btn01.attachEvent("onclick",function(){
alert(1);
});*/
//定义一个函数为指定函数绑定响应函数
//addEventListener----》this是绑定事件中的对象
//attachEvent----->this是window
//统一两个this
function bind(obj, eventString,callback){
//obj 绑定事件的对象 eventString 事件String
if(obj.addEventListener){
obj.addEventListener(eventString,callback,false);
}else{
//this是谁应该由调用方式决定
//callback.call（obj）修改this
obj.attachEvent("on"+eventString,function(){
//在匿名函数中调用
callback();
});
}
};
//只能同时为一个元素的一个事件绑定一个响应函数
/*btn01.onclick = function(){
}
btn01.onclick = function(){
}*/
}
</script>
事件的传播
事件的传播分为三个阶段
- 捕获阶段时：从最外层的祖先元素向内进行捕获
- 目标阶段：事件捕获到了目标元素，捕获结束，开始触发事件
- 冒泡阶段：事件从目标元素向祖先元素传递
如果希望在捕获阶段就触发事件，可以将addEventLisner的第三个参数设置为true（一般不会使用）
