javascript中DOM0,DOM2,DOM3级事件模型解析
DOM 即 文档对象模型。
文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容、结构或显示样式。
DOM3级,顾名思义,有三种DOM。
W3C协会早在1988年就开始了DOM标准的制定,W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。 DOM1级主要定义的是HTML和XML文档的底层结构。
DOM1
主要定义的是HTML和XML文档的底层结构。其实世上本来没有DOM0级,叫的人多了就有了DOM0级。在1998 年 10 月 DOM1级规范成为 W3C 的推荐标准,在此之前的实现我们就习惯称为DOM0级,其实本是没有这个标准的。
DOM2&DOM3
DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性。为此DOM2和DOM3级分为许多模块(模块之间具有某种关联),分别描述了DOM的某个非常具体的子集。
这些模块如下:
1、DOM2级核心(DOM Level 2 Core):在1级核心的基础上构建,为节点添加了更多方法和属性;
2、DOM2级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图;
3、DOM2级事件(DOM Level 2 Style):定义了如何以编程方式来访问和改变CSS样式信息;
4、DOM2级遍历和范围(DOM Level 2 Traversal and Range):引入了遍历DOM文档和选择其特定部分的新接口。
5、DOM2级HTML(DOM Level 2 HTML):在1级HTML基础上构建,添加了更多属性、方法和新接口。
6、DOM3级又增加了XPath模块和加载与保存(Load and Save)模块。
DOM2级和3级的目的在于扩展DOM API,以满足操作XML的所有需求,同时提供更好的错误处理及特性检测能力。 DOM0就是直接通过 onclick写在html里面的事件; DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定; DOM3是一些新的事件。
DOM的变化一方面是对命名空间的支持,另一方面是对方便操作其他web元素的支持。
我们可以通过下列代码来确定浏览器是否支持这些DOM模块:
var supportsDOM2Core = document.implementation.hasFeature("Core","2.0");
var supportsDOM3Core = document.implementation.hasFeature("Core","3.0");
var supportsDOM2HTML = document.implementation.hasFeature("HTML","2.0");
var supportsDOM2Views = document.implementation.hasFeature("Views","2.0");
var supportsDOM2XML = document.implementation.hasFeature("XML","2.0");
DOM0级事件处理方式
一开始浏览器处理事件的时候只有原始事件模型,事件处理程序被设置为js代码串作为html的性质值,例如:
<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >
通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。第四代web浏览器出现,至今为所有浏览器所支持。优点,简单且具有跨浏览器的优势。
例:var btn =
document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定当前元素btn
}
删除DOM0事件处理程序,只要将对应事件属性置为null即可。
btn.onclick = null;
缺点:一个事件处理程序只能对应一个处理函数。
DOM2级事件处理方式
2级DOM包含3个事件:事件捕获阶段、处于目标阶段和事件冒泡阶段
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。
//将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil';
var eventUtil = {
//添加句柄
addHandler:function(element,type,handler){
//判断DOM2级事件处理程序;
if(element.addEventListener){
element.addEventListener(type,handler,false);
//判断IE浏览器;
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
//使用DOM0级事件处理程序;
}else{
element['on'+type] = handler;
}
};
//删除句柄
removeHandler:function(element,type,handler){
//判断DOM2级事件处理程序;
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
//判断IE浏览器;
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
//使用DOM0级事件处理程序;
}else{
element['on'+type] = null;
};
};
};
//跨浏览器添加事件处理程序;
eventUtil.addHandler(btn3,'click',showMessage);
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);
事件对象
DOM中的事件对象
//在触发DOM上的事件时都会产生一个对象==event;
type == 获取事件类型;
target == 获取事件目标;
stopPropagation() == 停止事件冒泡;
preventDefault() == 阻止事件的默认行为;
function showMes(event){
alert(event.type);
//onclick;点击事件;
alert(event.target.nodeName); //INPUT;input按钮被触发;
event.stopPropagation(); //停止事件冒泡;
}
<a href="event.html" onclick="stopGoto();">跳转</a>
function stopGoto(event){
event.preventDefault(); //阻止默认行为;
}
IE中的事件对象
type == 同上;
srcElement属性 == 获取事件目标;
cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
returnValue属性 == 用于阻止事件的默认行为;
javascript中DOM0,DOM2,DOM3级事件模型解析的更多相关文章
- DOM0 DOM2 DOM3
DOM0 DOM2 DOM3 DOM是什么 W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. DOM 定义了访问 HTML 和 ...
- 什么是事件代理?DOM2.0标准事件模型的三个阶段
体验更优排版请移步原文:http://blog.kwin.wang/programming/js-event-delegation.html 事件代理,又称事件委托(Delegation),就是将处理 ...
- javascript中的常用表单事件用法
下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...
- javascript中不存在块级作用域,所以要小心使用在块级作用域中的函数声明所带来的作用域混乱.
在javascript中函数的作用域是一个非常重要的概念. javascript中是没有块级作用域,但是有函数作用域的概念. 我们在开发的过程中,经常会遇到这样的问题, 某个函数我暂时不需要,不想声明 ...
- 请写出JavaScript中常用的三种事件。
请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange
- DOM0,DOM2,DOM3 事件基础知识
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- DOM0和D0M2级事件
1.DOM0级事件:on+事件类型 1.1.在html行内直接绑定, 1.2.在js中绑定 A.DOM0级事件和DOM0级事件相互之间会覆盖,比如以下代码执行后弹出jsDOM0级,js中绑定的事件 覆 ...
- JS自定义事件(Dom3级事件下)
原文出处: http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html . 我拿出作者中的一段,感谢作者原创. ...
随机推荐
- FFmpeg封装格式处理3-复用例程
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10506653.html FFmpeg封装格式处理相关内容分为如下几篇文章: [1]. F ...
- 再会,OI
现在时间是一八年的七月二十一日下午,NOI2018 闭幕式已经结束.嗯,结束了... 谢绝了李总的好意也没有让父母来接,有段路还是要自己一个人走的... 总结一下 NOI ...其实也没有什么好总结的 ...
- .net MVC使用Session验证用户登录(转载)
.net MVC使用Session验证用户登录 用最简单的Session方式记录用户登录状态 1.添加DefaultController控制器,重写OnActionExecuting方法,每次访问 ...
- 【协议】1、tcp,http,socket协议介绍
1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上. ...
- canvas-color的几种设置
#ffff #642 = #664422 rgb(255,128,0) rgba(100,100,100,0.8) hsl(20,62%,28%) hsla(40,82%,33%,0.6) red
- Django Rest framework 之 权限
django rest framework 之 认证(一) django rest framework 之 权限(二) django rest framework 之 节流(三) django res ...
- springboot 监控 Actuator
springboot 提供了对项目的监控功能. 1.首先添加依赖包 <!-- https://mvnrepository.com/artifact/org.springframework.boo ...
- C# 6 元组应用 Part 1:方便的字典工厂方法
首先是简单的实现: public static class CollectionExtensions { public static IDictionary<TKey, TValue> M ...
- 什么是DDoS攻击?DDoS防御的11种方针详解
对于遭受DDOS攻击的情况是让人很尴尬的,如果我们有良好的DDoS防御方法,那么很多问题就将迎刃而解,我们来看看我们有哪些常用的有效地方法来做好DDoS防御呢. 对于DDoS防御的理解: 对付DDOS ...
- Azure Ubuntu18.04安装lxde桌面记录,Windows远程连接Ubuntu18.04(Linux)
执行如下命令: 尽量按以下顺序执行,否则可能会发生意向不到的问题(坑) 1.更新数据源 sudo apt-get update 2.更新安装包 sudo apt-get upgrade 3.安装lxd ...