在js中有一个专门的事件对象,来对事件进行操作:
event:当事件发生时,与事件有关的信息存储在一个临时的地方-event对象里面.供我们随时调用
event对象的方法:
clientX:鼠标距离页面可视区域左边的距离,相应的Y为上边的距离
事件流里的事件冒泡现象:
首先,试想冒泡是什么意思,在沸水里冒泡泡,物质从一个介质中提炼出来进入另一个介质,这就是冒泡现象
那么事件冒泡就是当一个元素接受到事件时,会把它接收的所有信息传给父级,一直到顶层window,这种现象为事件冒泡机制.
认识一下事件:事件的存在并不受事件函数的影响,比如无论div元素是否绑定了onclick事件,当你点击div时,点击这个事件已经存在了
,只是如果未绑定事件函数的话,什么也不会发生而已.
冒泡会解决很大一部分重复操作,但是有时候需要某个元素脱离事件流,不参与冒泡所以在要阻止的事件函数中添加event.cancelBubble=true;语句,cancelBubble意为取消冒泡.例:
oBtn.onclick=function(){
var ev=ev||event; 这是为兼容性考虑
ev.cancelBubble=true; 阻止oBtn点击事件的冒泡现象;
}
接下来学习另外一种绑定事件函数的方法:
首先我们掌握的绑定事件函数的方法为:
obj.onclick=function(){};
但当我们需要绑定多个函数为点击事件时就会出现问题
obj.onclick=function fn1(){};
obj.onclick=function fn2(){};
这样写,fn2会覆盖fn1,二者不能共存,所以出现第二种方法可以使多个函数共存,但是第二种绑定存在兼容性问题:
ie:obj.attachEvent("on"+事件名称,事件函数)
1.没有捕获
2.事件名称必须加"on"
3.事件函数的执行顺序:ie 678为倒序执行,即先执行写在下面的函数,ie9以后为正序.
4.this指向Window(即在使用this时,事件函数相当于绑定到了Window)
w3c:obj.addEventListenner(事件名称,事件函数,是否捕获);
1.有捕获 默认false为冒泡 true为捕获
2.事件名称没有"on"
3事件顺序只有正序
4.this指向当前对象(正常)
例子:
function ok(obj,evname,fn){ 定义三个参数,接下来的函数中要用
绑定事件函数存在兼容性问题,所以用if:
if(obj.addEventListenner){
obj.addEventListenner(evname,fn1,false); w3c浏览器
obj.addEventListenner(evname,fn2,false);
}else{
obj.attachEvent( "on"+evname , function(){fn1.call(obj); 在该事件函数中添加这句解决this问题} ); 在ie,由于this指向有问题,所以用call修正为obj
obj.attachEvent( "on"+evname , function(){fn2.call(obj);} );
};
}
如上,第二种绑定事件函数的方法可以使fn1和fn2共存,但执行顺序ie和w3c有所不同.
call方法为function函数的一种原生方法,就像数组里的push一样.
call意为调用函数:fn()==fn.call() 这两个是完全一样的,但call更为强大,使用call调用函数时可直接传参,其中第一个参数可以改变函数内部this的指向,从第二个参数开始就是原来的函数参数列表.如果第一个参数为null即空,则不改变this指向.
