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属性 == 用于阻止事件的默认行为;