一.事件的基本属性及不同浏览器的区别
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) 事件的好处:相当于使用了观察者模式,对消息进行了通知,而不用考虑具体的如函数执行上下文等问题,使得程序设计耦合性小,易扩展。不会阻塞触发事件处代码后面的代码的执行
分享到:
相关推荐
开发工具与关键技术:Adobe Dreamweaver JavaScript 事件相关知识点总结 网路安全
onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE...
1.实现JavaScript事件注册;...2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
JavaScript事件学习小结(五)js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员...
添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同
javascript_鼠标事件总结javascript_鼠标事件总结javascript_鼠标事件总结javascript_鼠标事件总结javascript_鼠标事件总结javascript_鼠标事件总结javascript_鼠标事件总结javascript_鼠标事件总结javascript_鼠标...
JavaScript事件学习小结(五)js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员...
JavaScript事件学习小结(五)js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员...
js 事件小结 表格区别
js事件大全,各种事件总结,javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员...
JavaScript事件学习小结(五)js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员...
JavaScript键盘事件测试小结,相信可能会对您的工作有一定的帮助作用
Event是Javascript中的重要事件,event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操作,下面是对这个对象的简单总结,希望跟大家一起学习
总结了javascript的各种事件和触发时机
主要介绍了JS针对浏览器窗口关闭事件的监听方法,总结整理了几种常用的浏览器关闭事件监听方法,非常简单实用,需要的朋友可以参考下
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 ...