[转]DOM0,DOM2,DOM3事件处理方式区别
文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容、结构或显示样式。W3C协会早在1988年就开始了DOM标准的制定,W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。
DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性。为此DOM2和DOM3级分为许多模块(模块之间具有某种关联),分别描述了DOM的某个非常具体的子集。
http://blog.sina.com.cn/s/blog_825442790101354v
具体详细的规范请查阅相关标准资料。
1、DOM0级事件处理方式:
通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。第四代web浏览器出现,至今为所有浏览器所支持。优点,简单且具有跨浏览器的优势。
例:var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定当前元素btn
}
删除DOM0事件处理程序,只要将对应事件属性置为null即可。
btn.onclick = null;
缺点:一个事件处理程序只能对应一个处理函数。
2、DOM2级事件处理方式
DOM2级事件处理方式指定了,添加事件处理程序和删除事件处理程序的方法。分别是:
addEventListener(eventName,func,isPuhuo);
removeEventListener(eventName,func,isPuhuo);
例如:
var btn = document.getElementById("btn");
handler = function(){
……
}
addEventListener("click",handler,false/true);
removeEventListener("click",handler,false/true);
参数分别是,事件处理属性名称,处理函数,是否在捕获时执行事件处理函数。
注:
a) eventName的值均不含on,例如注册鼠标点击事件eventName为“click”
b) 处理函数中的this依然指的是指当前dom元素
c) 通过addEventListener添加的事件处理程序,只能通过removeEventListener来删除,也就是说通过addEventListener添加的匿名函数将无法被删除。
IE中的DOM2级事件处理
d)IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现。这俩个方法接受俩个相同的参数,事件处理名称和事件处理函数。IE8级更早版本只支持冒泡型事件,所以attachEvent添加的事件都会被添加到冒泡阶段。
例如:
var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(){
alert(this);//此处this是window
});
注意;通过attachEvent添加的事件第一个参数是“onclick”而非标准事件中的“click”。在使用attachEvent方法和DOM0级事件处理程序的主要区别在于事件处理程序的作用域。采用DOM0级处理方式,事件处理程序会在其所属元素的作用域内运行。使用attachEvent,事件处理程序会在全局作用域内运行,因此this等于window。
跨浏览的事件处理方式:
var EventUtil = {
addEventHandler:function(element,type.handler){
if(element.addEventListener){
element.addEventListener(type,handler);
}else if(element.attachEvent){
element.attachEvent("on" + type,handler);
}else{
element["on" + type] = handler;
}
},
removeEventHandler:function(element,type,handler){
if(element.addEventListener){
element.removeEventListener(type,handler);
}else if(element.detachEvent){
element.detachEvent("on" + type,handler);
}else{
element["on"+type] = null;
}
}
}
3、DOM3事件
DOM浏览器中可能发生的事件有很多种,不同事件类型具有不同的信息,DOM3级事件规定了一下几种事件:
UI事件,当用户与页面上的元素交互时触发;
焦点事件,当元素获得或者失去焦点时触发;
鼠标事件,当用户通过鼠标在页面上执行操作时触发;
滚轮事件,当使用鼠标滚轮(或类似设备)时触发;
文本事件,当在文档中,输入文本时触发;
键盘事件,当用户通过键盘在页面上执行操作时触发;
合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时触发;
变动事件,当底层Dom结构发生变化时触发;
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件,IE9也支持DOM3级事件。
DOM中的事件模拟(自定义事件):
DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent()方法接收如下四个参数。
1)type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
2)bubble(布尔值):标示事件是否应该冒泡;
3)cancelable(布尔值):标示事件是否可以取消;
4)detail(对象):任意值,保存在event对象的detail属性中;
可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如:
var div = document.getElementById("myDiv");
EventUtil.addEventHandler(div,"myEvent", function () {
alert("div myEvent!");
});
EventUtil.addEventHandler(document,"myEvent",function(){
alert("document myEvent!");
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
var e = document.createEvent("CustomEvent");
e.initCustomEvent("myEvent",true,false,"hello world!");
div.dispatchEvent(e);
}
这个例子中创建了一个冒泡事件“myEvent”。而event.detail的值被设置成了一个简单的字符串,然后在div和document上侦听该事件,因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时,浏览器会将该事件冒泡到document。
IE中的事件模拟(IE8及之前版本中):
与DOM中事件模拟的思路类似,先创建event对象,再为其指定相应信息,然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
例如:
var btn = document.getElementById("myBtn");
//创建事件对象,不接受任何参数,结果会返回一个通用的event对象,你必须为该event对象指定所有必要的信息。
var event = document.createEventObject();
//初始化事件对象
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY =0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//触发事件
btn.fireEvent("onclick",event);
[转]DOM0,DOM2,DOM3事件处理方式区别的更多相关文章
- javascript中DOM0,DOM2,DOM3级事件模型解析
DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...
- DOM0 DOM2 DOM3
DOM0 DOM2 DOM3 DOM是什么 W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. DOM 定义了访问 HTML 和 ...
- DOM0,DOM2,DOM3 事件基础知识
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- iframe 动态onload事件处理方式
转自:http://w3help.org/zh-cn/causes/SD9022 标准参考 关于 HTML 4.01 规范中 BODY 标记的 onload 属性说明: http://www.w3.o ...
- 读JS高级API笔记_(DOM&&DOM2&&DOM3)哎呀——园龄才9个月啊
---恢复内容开始--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- Ajax的get和post两种请求方式区别
Ajax的get和post两种请求方式区别 (摘录):http://ip-10000.blog.sohu.com/114437748.html 解get和post的区别. 1. get是把参数数据队列 ...
- Hadoop Hive概念学习系列之hive三种方式区别和搭建、HiveServer2环境搭建、HWI环境搭建和beeline环境搭建(五)
说在前面的话 以下三种情况,最好是在3台集群里做,比如,master.slave1.slave2的master和slave1都安装了hive,将master作为服务端,将slave1作为服务端. 以 ...
- Android学习笔记(36):Android的两种事件处理方式
Android提供了两种事件处理的方式:基于回调的事件处理 和 基于监听的事件处理. 我们来说的easy理解一点: (1)基于回调的事件处理就是继承GUI组件,并重写该组件的事件处理方法.除了一些特定 ...
随机推荐
- Multi-process Architecture
For Developers > Design Documents > Multi-process Architecture This document describes Ch ...
- 浅谈unicode编码和utf-8编码的关系
字符串编码在Python里边是经常会遇到的问题,特别是写文件以及网络传输的过程中,当调用某些函数的时候经常会遇到一些字符串编码提示错误,所以有必要弄清楚这些编码到底在搞什么鬼. 我们都知道计算机只能处 ...
- MYSQL去重复并计算总数的sql语句
SELECT count(distinct uid) FROM `two_users`
- 树莓派开机运行Python脚本 控制LED灯闪烁
一.新建一个开机运行文件 在 /home/pi/.config 下创建一个文件夹,名称为 autostart,并在该文件夹下创建一个led.desktop文件(文件名以.desktop结尾) 编辑le ...
- vector要注意的点
vector的元素类别T,必须具备assignable和copyable两个性质. vector的容量很重要: 1. 一旦内存重新配置,和vector元素相关的所有references.pointer ...
- 使用Linux遇到的一些问题和解决方案
1.如何在重装系统或换机器以后继续使用以前用过的thunderbird邮件 执行命令thunderbird -ProfileManager以后会打开一个配置用户界面. 在里面添加一个新的配置,然后选择 ...
- Erlang简单并行server
Erlang简单并行服务器 (金庆的专栏) Erlang并行服务器为每一个Tcp连接创建相应的连接进程,处理client数据. 參考 Erlang程序设计(第2版)17.1.3 顺序和并行服务器 并行 ...
- poj1328Radar Installation 贪心
Radar Installation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 64472 Accepted: 14 ...
- Java图像渐变
图像渐变我们大体想一下思路无非是这样:将图像所有的像素点的RBG,每个点就减去相同的量,而且这个量是个渐变的量.是的,就是这样,我们的程序也是这个思路,不过就是没有单纯的“想”这么简单了.我这里只编写 ...
- js插件---画图软件wePaint如何使用(插入背景图片,保存图片,上传图片)
js插件---画图软件wePaint如何使用(插入背景图片,保存图片,上传图片) 一.总结 一句话总结:万能的wPaint方法,通过不同的参数执行不同的操作.比如清空画布参数传"clear& ...