事件对象的简介
事件对象
例：
window.onload = function(){
//当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg") ;
/*
* onmousemove
*该事件将会在鼠标在元素中移动时被触发
*/
areaDiv.onmousemove = function(){
//在showMsg中显示鼠的坐标
};
};
事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事 件对象作为实参传递进响应函数，
在事件对象中封装了当前事件相关的一切信息，比如: 鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向
clientX 可以获取鼠标指针的水平坐标
cilentY 可以获取鼠标指针的垂直坐标
var X = event.clientX;
var y = event.clientY;
在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
if(!event){
event = window.event ;
}
//解决兼容问题
//event = event||windows.event;
例：设计元素跟随鼠标移动
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event){
//解决兼容问题
event = event|| window. event;
//获取到鼠标的坐标
/*
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量，是相对于整个页面的
pageX和pageY可以获取鼠标
*/
var left = event.pageX;
var top = event.pageY;
//设置div的偏移量
box1.style.left = left + "px";
box1.style.top = top + "px" ;
pageX和pageY可以获取鼠标相对于当前页面的坐标
但是这个两个属性在IE8中不支持，所以如果需要兼容IE8,则不要使用
chrome认为浏览器的滚动条是body的，可以通过body . scrollTop来获取
火狐等浏览器认为浏览器的滚动条是html的，
var st = document.body.rollTop||document.documentElement.scrollTop;
var sl = document.body.scrollLeft||document.ocumentElement.scrollLeft;
事件的冒泡
事件的冒泡( Bubble)
- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
//为s1绑定-一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(){
alert("我是span的单击响应函数");
};
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(){
alert("我是diV的单击响应函数");
};
//为body绑定一个单击响应函数
document.body.onclick = function(){
alert("我是body的单击响应函数");
};
取消冒泡
可以将事件对象的cancelBubble设置为true,即可取消冒泡
event.cancelBubble = true;
事件的委派
只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
我们可以尝试将其绑定给元素的共同的祖先元素
- 指将事件统一 绑定给元素的共同的祖先元素， 这样当后代元素上的事件触发时， 会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
<head>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后添加超链接
var btn01 = document.getElementById("btn01" );
btn01.onclick = function(){
//创建一个li
var li = document. createElement("1i");
li.innerHTML = "<a href='javascript:; '>超链接</a>";
//将1i添加到u1中
u1.appendChild(1i);
}
//为每一个超链接都绑定一个单击响应函数
//获取所有的a
var allA = document.getElementsByTagName("a");
//遍历
for(var i=0 ; i<allA.length ; i++){
allA[i].onclick = function( ){
alert( "我是a的单击响应函数! ! ! ");
};
}
//为u1绑定一个单击响应函数
u1.onclick = function( ){
//如果触发事件的对象是我们期望的元素，则执行否则不执行
//event中的target表示的触发事件的对象
alert( "我是u1的单击响应函数") ;
/*如果触发事件的对象是我们期望的元素，则执行否则不执行
if(event.target.className == "link"){
alert( "我是u1的单击响应函数");
*/
};
};
</script>
</head>
<body>
<button id= "btn01">添加超链接</button>
<ul id="u1">
<li><a href= "javascript:;">超链接1</a></li>
<li><a href= "javascript:;">超链接2</a></li>
<1i><a href= "javascript:;">超链接3</a></li>
</ul>
</body>
事件的绑定
使用 对象.事件 = 函数的形式绑定响应函数，
它只能同时为一个元素的一个事件绑定一个响应函数，
不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
addEventListener( )
通过这个方法也可以为元素绑定响应函数
- 参数:
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
attachEvent( )
在IE8中可以使用attachEvent( )来绑定事件
- 参数:
1.事件的字符串，要on
2.回调函数这个方法也可以同时为一个事件绑定多个处理函数，
不同的是它是后绑定先执行，执行顺序和addEventListener( )相反
定义一个函数，用来为指定元素绑定响应函数
- 参数:
obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数
function bind(obj，eventStr，callback){
}
大部分浏览器兼容的方式
obj.addEvent Listener(eventStr,callback,false) ;
IE8及以下
obj.attachEvent("on"+leventStr,callback);
事件的传播
-
关于事件的传播网景公司和微软公司有不同的理解
-
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 -
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素
-
W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，可以将addEventListener( )的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
- IE8及以下的浏览器中没有捕获阶段
