第四章 事件
第一讲.事件对象
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中,封装了当前事件的一切信息,比如鼠标的坐标,鼠标哪个键被按下等
onmousemove事件 该事件将会在鼠标在元素中移动时触发
- clientX属性 可以获取鼠标指针在当前窗口的水平坐标
- clientY属性 可以获取鼠标指针在当前窗口的垂直坐标
如果将滚动条拖动,则仍然是以浏览器的视口作为(0,0),而不是以html的位置作为(0,0)
div.onmousemove=function(event){
var x=event.clientX;
var Y=event.clientY;
}
ie8中,浏览器不会传递参数进去,要用window.event.clientX这样子搞
所以要做个判断,是否有event
if(!event){
event=window.event;
}
//或者
event=event||window.event;//这个常用
这样就可以解决兼容性问题
- pageX 获取鼠标相对于当前页面的横坐标
- pageY 获取鼠标相对于当前页面的纵坐标
如果将滚动条拖动,则是以html的位置作为(0,0),而非视口
该属性不能用于ie8
浏览器的滚动条是属于html标签的
第二讲.事件的冒泡
冒泡Bubble
所谓的冒泡,指的就是事件的向上传导,当后代元素的事件被触发时,其祖先元素的相同事件也会被触发
冒泡在开发中大部分情况下是非常有用的,如果不希望发生时间的冒泡,可以通过事件对象取消冒泡
取消冒泡属性:cancelBubble
event.cancelBubble=true;
想取消哪个元素的,就在哪个元素的单击响应函数里取消冒泡
第三讲.事件的委派
指将我们的事件同意绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件.
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
有一个问题,不只是子元素会触发,父元素的其他地方也会触发
所以要设置一个判断,如果触发事件的是我们期望的元素则执行,否则不执行
target属性,返回值为触发事件的对象
if(event.taerget.className=='link'){//判断类名是不是我们需要的
alert('执行');
}
第四讲.事件的绑定
使用 对象.事件=函数 的形式绑定响应函数
它只能同时为一个元素的一个事件绑定一个响应函数
不能绑定多个,如果绑定了多个,则后面的会覆盖掉前面的
于是引出了第二个绑定事件的响应函数:addEventListener( )方法
通过这个方法也可以为元素绑定响应函数.
参数:
- 事件的字符串,不要on
- 回调函数,当事件触发时,该函数会被调用
- 是否在捕获阶段触发事件,需要一个布尔值,一般传false
btn.addEventListener('click',function(){
},false);
它的优点是,它不是绑定一个,而是添加一个绑定,它可以同时为一个元素的相同事件同时绑定多个响应函数
这样当事件被触发是,响应函数会按照函数的绑定顺序执行
不支持ie8.ie8使用:attchEvent( )方法
参数:
- 事件的字符串,要on
- 回调函数
btn.attchEvent('onclick',function(){
});
也可以绑定多个,不同的是它是后绑定的先执行
但是大部分情况下顺序不重要,如果重要的写成一个就可以了
同样的方法解决兼容性问题:
参数:obj要绑定的事件对象 eventStr事件的字符串(不要on) callback回调函数
function bind(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);
}else{
obj.attchEvent('on'+eventStr,function(){
//在匿名函数中调用回调函数
callback.call(obj);//call方法可以修改函数的this为指定参数
});
}
}让浏览器调匿名函数,然后obj调回调函数
然后用的时候:
btn.bind(btn,'click',function(){
alert('aaa');
});