JS / 事件基础知识

目录

事件对象

事件冒泡 Bubble

事件委派

事件绑定

事件传播

---

事件对象

onmousemove 鼠标移动事件 

        - 坐标获取：clientX  clientY （总是相对于可见窗口）

        - 相对于整个页面的坐标：pageX pageY （ie8及以下不可用，可以加上scrollTop）

（chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取，火狐等浏览器认为浏览器的滚动条是html的。兼容性：

var st = document.body.scrollTop || document.documentElement.scrollTop

）

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

event / e，不定义也传。在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标，键盘哪个按键被按下。

在IE8中，响应函数被触发时，浏览器不会传递事件对象

在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

window.event.clientX  /  window.event.clientY

但是火狐不兼容这种方式

兼容性：

if(!event){

        event=window.event

}

或者 event=event || window.event

事件冒泡 Bubble

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，开发中大部分情况冒泡是有用的，如果不希望事件冒泡，则可以通过事件对象来取消冒泡

event.cancelBubble=true

事件委派

为每一个超链接都绑定一个单击响应函数，这种操作比较麻烦， 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定

只绑定一次事件，即可应用道多个元素上，即使元素是后添加的：

可以将其绑定给元素的共同的祖先元素

事件委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

会发现点击空白的地方也能触发。

如果触发的事件是我们期望的元素则执行，否则不执行：

事件绑定时：返回触发此事件的元素 事件对象的target表示触发事件的对象

event=event || window.event

target=event.target

if(target.className=='link'){

        ... ...

}

隐患：class可以有多个 如果一个元素class既有link又有other 则不会触发该事件，可以用正则表达式解决该隐患。

事件绑定

方式一：btn.οnclick=function(){}

使用对象.事件=函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果同一个元素绑定了多个相同的事件，后面的会覆盖前面的，只有最后一个生效

方式二：btn.addEventListener()  ie8及以下不支持

通过这个方法也可以为元素绑定响应函数，可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

参数：1.事件的字符串 click mousemove （不要on）

           2.回调函数，当事件触发时，该函数会被调用

           3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

         （如果希望在捕获阶段就触发事件，可以将addEventListener的第三个参数设置为 true

             一般情况下不会希望在捕获阶段执行触发事件，所以这个参数一般都是false）

btn.addEventListener("click",function(){

        alert(1)

},false)

ie8及以下使用 attachEvent(),别的浏览器不支持，执行顺序不同，后绑定先执行

参数：1.事件的字符串，要on

           2.回调函数

btn.attachEvent(“onclick”,function(){

        alert(2)

})

兼容性：定义一个函数，用来为指定元素绑定响应函数

addEventListener中的this是绑定事件的对象btn

attachEvent里的this是window

需要统一两个方法this

参数：obj 要绑定事件的对象

eventStr 事件的字符串 不要on

callback 回调函数

function bind(obj,eventStr,callback){
 
        if(obj.addEventListener){
 
        //大部分浏览器兼容的方式
 
                obj.addEventListener(eventStr,callback,false)
 
        }else{
 
        //ie8及以下
 
                obj.attachEvent("on"+eventStr,function(){
 
                    //在匿名函数中调用回调函数,使this变成obj
 
                    callback.call(obj);
 
                })
 
         }
 
}

this是谁由调用方式决定

callback.call(obj)

DOCTYPE html>