DOM第四章 事件(上)

第四章 事件

第一讲.事件对象

当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数

在事件对象中,封装了当前事件的一切信息,比如鼠标的坐标,鼠标哪个键被按下等

onmousemove事件 该事件将会在鼠标在元素中移动时触发

1. clientX属性 可以获取鼠标指针在当前窗口的水平坐标
2. 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;//这个常用

这样就可以解决兼容性问题

1. pageX 获取鼠标相对于当前页面的横坐标
2. pageY 获取鼠标相对于当前页面的纵坐标

如果将滚动条拖动,则是以html的位置作为(0,0),而非视口

该属性不能用于ie8

浏览器的滚动条是属于html标签的

第二讲.事件的冒泡

冒泡Bubble

所谓的冒泡,指的就是事件的向上传导,当后代元素的事件被触发时,其祖先元素的相同事件也会被触发

冒泡在开发中大部分情况下是非常有用的,如果不希望发生时间的冒泡,可以通过事件对象取消冒泡

取消冒泡属性:cancelBubble

event.cancelBubble=true;

想取消哪个元素的,就在哪个元素的单击响应函数里取消冒泡

第三讲.事件的委派

指将我们的事件同意绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素

从而通过祖先元素的响应函数来处理事件.

事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能

有一个问题,不只是子元素会触发,父元素的其他地方也会触发

所以要设置一个判断,如果触发事件的是我们期望的元素则执行,否则不执行

target属性,返回值为触发事件的对象

if(event.taerget.className=='link'){//判断类名是不是我们需要的
    alert('执行');
}

第四讲.事件的绑定

使用 对象.事件=函数 的形式绑定响应函数

它只能同时为一个元素的一个事件绑定一个响应函数

不能绑定多个,如果绑定了多个,则后面的会覆盖掉前面的

于是引出了第二个绑定事件的响应函数:addEventListener( )方法

通过这个方法也可以为元素绑定响应函数.

参数:

1. 事件的字符串,不要on
2. 回调函数,当事件触发时,该函数会被调用
3. 是否在捕获阶段触发事件,需要一个布尔值,一般传false

btn.addEventListener('click',function(){
    
},false);

它的优点是,它不是绑定一个,而是添加一个绑定,它可以同时为一个元素的相同事件同时绑定多个响应函数

这样当事件被触发是,响应函数会按照函数的绑定顺序执行

不支持ie8.ie8使用:attchEvent( )方法

参数:

1. 事件的字符串,要on
2. 回调函数

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');
});