JS事件总结

 

一．事件的基本属性及不同浏览器的区别

a)         获取事件的办法

                         i.              标准DOM。

在标准dom模型中，事件对象为事件处理函数的第一个参数

window.onclick=function(e){

         confirm(e.clientX+”--”+e.clientY)

}

                       ii.              IE，

然后在IE中，事件对象作为window的一个属性存在，并且此属性在事件触发时才有值

window.onclick=function(){

         var e = window.event;

         confirm(e.clientX+”--”+e.clientY)

}

                      iii.              通用的获取办法

window.onclick=function(e){

         e = e||window.event;

}

b)         下面这个表格展现了常用的DOM和IE的事件对象属性获取方式的不同

DOM	IE	属性解释
e.target	e.srcElement	触发事件的目标对象
e.preventDefault();	e.returnValue=false;	阻止事件默认行为
e.stopPropogation();	e.cancelBubble=false;	阻止事件冒泡
e.pageX	e.clientX+document.body.scrollLeft	鼠标的页面X坐标
e.pageY	e.clientY+document.body.scrollTop	鼠标的页面Y坐标

c)         下面的表格展现了2个浏览器模型都具体的常用属性

属性	解释
e.clientX	相对于浏览器窗口的（不包括工具条等）
e.clientY
e.screenX	相对于浏览器窗口的（包括工具条等）
e.screenY

 

二．添加事件的方法（覆盖和增加）

a)         覆盖事件

这种方法会取消之前设置的事件函数，使用新设置的事件处理函数响应事件

                         i.              oInput.onclick=function(){}

b)         增加事件

这种方法不会取消之前设置的事件函数，同时新增加处理函数

                         i.              DOM中

1.         添加事件 -oInput.addEventListener(“click”,fn,catchTrigger)

2.         移除事件 –oInput.removeEventListener(“click”,fn,catchTrigger)

需要说明的是，第三个参数为true，则在捕获阶段触发，为false，则在冒泡阶段触发，同时，移除时，这个参数的值，必须和添加时的值相同

                       ii.              IE中

1.         添加事件-oInput.attachEvent(“onclick”,fn)

2.         移除事件-oInput.detachEvent(“onclick”,fn)

三．事件流的理论知识

a)         标准DOM

                         i.              事件流包括捕获阶段和冒泡阶段，通过添加事件函数的第三个函数来指定何时触发

b)         IE模型

                         i.              IE模型只包括冒泡阶段

四．事件的优化-事件委托

a)         在开发过程中，为了优化效率，我们可以使用事件委托的办法来优化事件函数

b)         比如有一个DIV容器，里面有若干按钮，按钮的数目非常大，比如几千个，那么我们给每个按钮都添加一个事件函数，则非常耗费效率。事件委托的做法是，我们给DIV添加一个事件，然后在事件函数内部通过判断的方式来处理

五．自定义事件

a)         像click，mouseover，mouseout等，都属于内置事件，

b)         我们也可以像使用内置事件一样，使用自定义的事件

c)         原理：在添加事件时，将事件的类型名，事件的处理函数，保存在内存中；触发时，从内存中寻找出事件名对应的函数，并执行；移除时，移除内存中的事件类型名及其函数

d)         Jquery中的相关方法（有兴趣可以查看jquery的源码进行学习）

                         i.              $(someobj).bind(eventtype,data,fn)

1.         Eventtype为事件类型名字符串，data为向事件对象传递的参数，fn为回调函数

2.         Data可为json对象，调用时从event.data中获取

                       ii.              $(someobj).trigger(eventtype,data)

1.         Eventtype为绑定时的对应名字，data为触发时像函数传递的参数，为数组对象，然后函数里从第二个开始，依次对应

六．事件与回调函数

a)         开发组件过程中，遇到的一个问题是，我对外开放的某些接口，是使用自定义事件，还是使用回调函数，我认为这个东西还是要根据实际情况进行综合考虑

b)         回调函数的好处：容易理解。但是会阻塞回调处代码后面的代码的执行

c)         事件的好处：相当于使用了观察者模式，对消息进行了通知，而不用考虑具体的如函数执行上下文等问题，使得程序设计耦合性小，易扩展。不会阻塞触发事件处代码后面的代码的执行