JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题


Posted in Javascript onAugust 03, 2016

将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果。代码如下:

var eventUtil = {
// 添加事件句柄
addEventHandler: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;
}
},
// 删除事件句柄
removeEventHandler: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;
}
},
// 获取事件对象
getEvent:function (event) {
return event?event:window.event;
},
// 获取事件的类型
getType:function (event) {
return event.type;
},
// 获取事件对象目标
getTarget:function (event) {
if (event.target) {
return event.target;
}else{
return event.srcElement;
}
},
// 阻止事件冒泡
stopPropagation:function (event) {
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
// 阻止事件默认行为
preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
}
}

在练习代码的时候,自己出现了几个错误的地方,导致运行出错,记录一下,加深记忆。

① 添加句柄是混淆参数的位置:首先是addEventHandler(element,type,handler)的参数分别表示,为哪个元素element添加事件,事件的类型type,事件处理函数handler。自己容易把handler和后面addEventLister(type,handler,false)中的false(表示冒泡阶段)的位置混淆。

导致结果:在写的过程,自己认真想了一下,理解了addEventHandler需要的哪些参数,就知道哪个位置该用哪个参数,最终写对了,未导致错误。

解决办法:理解并记住。

②在IE事件处理程序判断分支中,对attachEvent和detachEvent拼写错误,少了Event,只写了attach或detach。

导致结果:虽然没有报错,但是无法使用addEventHandler和removeEventHandler在IE中添加或删除事件。

解决办法:多练记牢就行。attachEvent 和 detachEvent。

③忘记了在IE事件处理程序attachEvent 和 detachEvent的参数里事件类型是需要加"on"的;写成了attachEvent(type,handler)。其实正确的应该是attachEvent("on"+type,handler),另外忘记了还有DOM0级事件处理的判断分支

导致结果:同样的,无法兼容IE事件处理。在IE上用封装的方法添加或删除事件不能成功。

解决办法:也只能记住。还有一点需要注意:DOM0级事件中element["on"+type]这种方式。比如element["on"+"click"]等价于element.onclick。

④最后一个属性的结尾也加逗号,比如在阻止事件默认行为 preventDefault:完成后加逗号,如下面代码片段(注释)

preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
},//最后一个属性preventDefault完成后加了逗号,会出错
}

导致结果:在IE中运行时报错(其中event.js的54行是最后逗号的下一行,实际上就是逗号导致的;test.html的第10行则是因为调用了event.js中的eventUtil.addEventHandler方法)

解决办法:毫无疑问,去掉最后的逗号即可。

⑤还是拼写错误,IE中阻止事件冒泡的属性cancelBubble,写多了一个s,写成了cancelBubbles。

导致结果:没有报错,但是无法阻止IE中的事件冒泡。

解决办法:改回来

以上所述是小编给大家介绍的JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 #Javascript
js删除Array数组中指定元素的两种方法
Aug 03 #Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 #Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 #Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 #Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 #Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP反射API示例分享
2016/10/08 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python列表删除的三种方法代码分享
2017/10/31 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python实现数据分析与建模
2019/07/11 Python
Python map及filter函数使用方法解析
2020/08/06 Python
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
数控专业个人求职信范文
2014/02/05 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
《青山不老》教学反思
2016/02/22 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript