javascript将DOM事件处理程序封装为event.js 出现的低级错误记录
将 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 出现的低级错误记录的更多相关文章
- 传统DOM事件处理程序
传统DOM事件处理程序与比HTML事件处理程序相比,优点:可以将HTML和JS脚本分离. 它的操作形式如下 : <body> <div>传统DOM事件处理程序与比HTML事件处 ...
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- JavaScript:关于事件处理程序何时可以直接访问元素的属性
指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(th ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- JavaScript中的事件处理程序
JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用事件处理程序来预订事件,以便在事件发生的时候执行响应的代码.这种观察者模式的模 ...
- 前端笔记之JavaScript(十)深入JavaScript节点&DOM&事件
一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...
- 【总结整理】JavaScript的DOM事件学习(慕课网)
事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...
- javascript:理解DOM事件
首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. 标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...
- JS事件流与DOM事件处理程序
在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...
随机推荐
- ASP.NET MVC中错误日志信息记录
MVC中有一个处理异常的过滤器 HandleErrorAttribute 1.新建一个类继承自 HandleErrorAttribute,然后重写OnException这个方法 public clas ...
- HTML5标准简介
最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比X ...
- 重新想象 Windows 8 Store Apps (68) - 后台任务: 控制通道(ControlChannel)
[源码下载] 重新想象 Windows 8 Store Apps (68) - 后台任务: 控制通道(ControlChannel) 作者:webabcd 介绍重新想象 Windows 8 Store ...
- LeetCode2:Median of Two Sorted Arrays
题目: There are two sorted arrays A and B of size m and n respectively. Find the median of the two sor ...
- http get post
使用java代码模拟http请求 package ftp; import java.io.BufferedReader; import java.io.IOException; import java ...
- Java调用JavaScript
1.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...
- c#泛型方法返回null的问题
c#的泛型方法实现和java实现有点不同,在java中,所有的泛型方法运行时类型必须是引用类型,所以和非泛型一样可以返回null. 但是c#中有点不同,可以同时是值类型和引用类型,而值类型不能赋值nu ...
- iOS 线程相关-----绝对de干货
平时用线程总是知其然,而不知所以然,现在针对涉及到的有关线程的知识体系做了一个系统的整理,由于GCD平时用的也比较多,所以用了大量的空间来讲述这一块,其他的涉及的不是很多,也做了说明,真真切切的是一个 ...
- 七年IT生涯的经验教训
七年IT生涯的经验教训[转]我在IT界也拼打了有好几年了,但是现在和别人比较起来不是很如意.从天分上来说,我在属于智商不低的人:从技术上说,几乎没有我拿不下的:从见解上看,我是很有点子看法的人. ...
- 【GOF23设计模式】迭代器模式
来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_迭代器模式.JDK内置迭代器.内部类迭代器 package com.test.iterator; /** * 自定义的迭代 ...