将 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 出现的低级错误记录的更多相关文章

  1. 传统DOM事件处理程序

    传统DOM事件处理程序与比HTML事件处理程序相比,优点:可以将HTML和JS脚本分离. 它的操作形式如下 : <body> <div>传统DOM事件处理程序与比HTML事件处 ...

  2. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  3. JavaScript:关于事件处理程序何时可以直接访问元素的属性

    指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(th ...

  4. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  5. JavaScript中的事件处理程序

    JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用事件处理程序来预订事件,以便在事件发生的时候执行响应的代码.这种观察者模式的模 ...

  6. 前端笔记之JavaScript(十)深入JavaScript节点&amp;DOM&amp;事件

    一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...

  7. 【总结整理】JavaScript的DOM事件学习(慕课网)

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

  8. javascript:理解DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...

  9. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

随机推荐

  1. 第四章 函数(JavaScript:语言精粹)

    函数包含一组语句,用来指定对象的行为,其代码可以用来重复使用.   一般来说,编程就是将一组需求分解成一组函数和数据结构的技能.   概览:函数对象 | 函数字面量 | 调用 | 方法调用模式 | 函 ...

  2. 推荐5 款WordPress主题后台选项开发框架

    在开发WordPress 主题的时候,借用成熟的WordPress 主题后台选项开发框架可以为我们省下不少功夫.相信你接触过不少国人做的所谓“原创”主题,一看后台都是千篇一律的界面(连CSS 都懒得改 ...

  3. WPF关于“在“System.Windows.Markup.StaticResourceHolder”上提供值时引发了异常。”问题解决办法

    在WPF中添加样式,在MainWindow.xaml使用自定义按钮FButton时报错,报错信息如下: "System.Windows.Markup.XamlParseException&q ...

  4. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  5. ajax接收php返回得到一堆html代码

    ajax接收php返回得到一堆html代码 一.      错误代码: <font size='1'><table class='xdebug-error xe-notice' di ...

  6. zigbee 安全通信加密链接密钥

    ---恢复内容开始--- #define KEY_TYPE_TC_MASTER  0        // Trust Center Master Key信任中心主密钥#define KEY_TYPE_ ...

  7. HDU 3277 Marriage Match III(并查集+二分答案+最大流SAP)拆点,经典

    Marriage Match III Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. Dockerize a .NET Core application

    Dockerize a .NET Core application Introduction This example demonstrates how to dockerize an ASP.NET ...

  9. 20155208实验三 敏捷开发与XP实践

    20155208实验三 敏捷开发与XP实践 一.实验内容 (1)在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己感觉最 ...

  10. day 23 面向对象的命名空间与组合

    创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 1. 静态属性就是直接在类中定义的变量 2.动态属性就是定义在类中的方法. 其 ...