一.事件的基本属性及不同浏览器的区别
a) 获取事件的办法
i. 标准DOM。
在标准dom模型中,事件对象为事件处理函数的第一个参数
window.οnclick=function(e){
confirm(e.clientX+”--”+e.clientY)
}
ii. IE,
然后在IE中,事件对象作为window的一个属性存在,并且此属性在事件触发时才有值
window.οnclick=function(){
var e = window.event;
confirm(e.clientX+”--”+e.clientY)
}
iii. 通用的获取办法
window.οnclick=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.οnclick=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) 事件的好处:相当于使用了观察者模式,对消息进行了通知,而不用考虑具体的如函数执行上下文等问题,使得程序设计耦合性小,易扩展。不会阻塞触发事件处代码后面的代码的执行