DOM 中的事件处理介绍


Posted in Javascript onJanuary 18, 2012

该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。

DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法。 实现 Event 接口的对象一般作为第一个参数传入事件处理函数,以用来提供当前事件相关的一些信息。

事件注册
根据 DOM 2 Events 中描述,节点使用 'addEventListener' 和 'removeEventListener' 方法绑定和解绑事件监听器,但 IE6 IE7 IE8 不支持这两个方法, 而使用 'attachEvent' 和 'detachEvent' 方法作为替代方案,Opera 两类方法都支持。Chrome Safari Firefox 只支持标准方法。

为了解决浏览器兼容问题,可以自定义函数来解决。例如:

var EventUtil = { 
addHandler: function (element, type, handler) { 
if (element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else if (element.attachEvent) { 
element.attachEvent("on" + type, handler); 
} else { 
element["on" + type] = handler; 
} 
}, 
removeHandler: function (element, type, handler) { 
if (element.removeEventListener) { 
element.removeEventListener(type, handler, false); 
} else if (element.detachEvent) { 
element.detachEvent("on" + type, handler); 
} else { 
element["on" + type] = null; 
} 
} 
};

关于 'addEventListener' 和 'attachEvent' 有几点需要注意:

IE 不支持在捕获阶段触发事件监听器,'attachEvent' 方法没有提供参数说明是否响应在捕获阶段触发的事件;
'addEventListener' 和 'attachEvent' 都可以注册多个事件监听器;
在 Firefox Chrome Safari Opera 中给同一事件注册同一个事件监听器多次,重复注册的会被丢弃;而在 IE 中重复注册的事件监听器会被重复执行多次;
当给同一元素注册了多个事件监听器的时候,IE6 IE7 的事件监听器执行顺序是随机的,IE8 是倒序的,Firefox Chrome Safari Opera 是顺序的;
当元素注册的事件监听器中有非法的事件监听器时(非函数),在 IE Firefox 中会抛出异常,而在 Chrome Safari Opera 中则会忽略非法的事件监听器,继续执行其他的事件监听器。
事件对象
在ie中,事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发的,还是其他事件, 都会更新window.event 对象。 所以在代码中,只要轻松调用 window.event 就可以轻松获取 事件对象, 再 event.srcElement 就可以取得触发事件的元素进行进一步处理。

对于标准的 DOM 处理来说, 事件对象却不是全局对象,一般情况下,是现场发生,现场使用,把事件对象自动传递给对应的事件处理函数。 在代码中,函数的第一个参数就是事件对象了。

为了解决兼容性问题,通常在代码中如下处理:

function handler(e){ 
e = e || window.event; 
}

需要注意的是,使用 <button id="btn" onclick="foo()">按钮1</button> 进行事件注册,标准方式下却不能在事件处理方法中取得事件对象。

原因是 onclick="foo()" 就是直接执行了, foo() 函数,没有任何参数传递给 foo 函数。

有两个办法解决这个问题。

第一,将注册的方法修改为 <button id="btn" onclick="foo(event)">按钮</button>,注意,这里的 event 不是形参,而是实参,必须名为 event。这样 foo 函数就可以得到事件参数了。

第二,不修改注册的代码,在事件处理方法上进行处理。关键在于此时实际上存在事件对象,只不过没有传递给 foo 函数罢了,我们可以找到调用 foo 函数的那个函数,当然这是一个系统函数,没有关系,通过 foo.caller 可以取得当前调用 foo 函数的函数,这个函数的第一个参数就是事件对象,所以,我们可以这样取得这个事件对象了。foo.caller.arguments[0]。

注意:

只有在使用 attachEvent 方法注册事件监听器的时候,IE 才支持使用事件监听器传入的第一个参数作为事件对象的方式;
Chrome Safari Opera 两种获取事件对象的方式都支持;
Firefox 只支持获取事件对象的标准方式。
事件对象的属性
IE 对事件对象的标准属性和方法支持有限,针对大部分属性和方法,IE 都提供了一套替代非标准的替代方案; 而 Firefox Chrome Safari Opera 除了全面支持事件对象的标准属性和方法外,还在不同程度上支持了 IE 提供的非标准替代方案。

使用特性判断使用与标准对应的非标准方法及属性

target

srcElement

preventDefault()

 returnValue

stopPropagation()

cancelBubble

relatedTarget

fromElement toElement

例如:

getEvent: function (event) { 
return event ? event : window.event; 
}, 
getTarget: function (event) { 
return event.target || event.srcElement; 
}, 
preventDefault: function (event) { 
if (event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = false; 
} 
}, 
stopPropagation: function (event) { 
if (event.stopPropagation) { 
event.stopPropagation(); 
} else { 
event.cancelBubble = true; 
} 
}

参考资料:

SD9011: 事件模型在各浏览器中存在差异

Javascript 相关文章推荐
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
javascript实现日期按月份加减
May 15 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 #Javascript
JavaScript中常用的运算符小结
Jan 18 #Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 #Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 #Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 #Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 #Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 #Javascript
You might like
SSI指令
2006/11/25 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
javascript 打印页面代码
2009/03/24 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python多重继承之菱形继承的实例详解
2020/02/12 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
师范学院教师自荐书
2014/01/31 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
酒店端午节促销方案
2014/02/18 职场文书
技校毕业生自荐书
2014/05/23 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
上班迟到检讨书
2015/05/06 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书