JavaScript DOM文档事件-DOM0、DOM2级事件处理程序

 2015年10月04日    1160     声明


浏览器端的JavaScript采用的是事件驱动的异步编程模型。在这种设置模式下,当文档、浏览器、元素或与之相关的对象发生某些事情时,浏览器就会产生对应的事件(event)。事件是JavaScript和HTML DOM交互的基础,DOM元素支持的每种事件,都可以使用一个与相应事件处理程序(事件监听)通过相应HTML属性来指定。添加DOM元素事件处理程序,可以使用DOM0级的方式添加,也可以使用DOM2级的方式添加。

事件是HTML文档执行某种操作时需要执行的动作,如:clickloadmouseover等都是事件的名字,响应事件的函数就叫做事件处理程序,又叫做事件监听器。在W3C对DOM事件进行规范化之前的事件处理,一般称为DOM0级事件处理程序。W3C在DOM2级文档规范中,包含了DOM 事件(DOM Events)规范,也就是我们通常所说的DOM2级事件处理程序


1. DOM0级事件处理程序

DOM0级事件处理程序,事件名以'on'开头,因此click事件的事件处理程序就是onclickload事件的事件处理程序就是onload

1.1 HTML事件处理程序

一个HTML元素支持事件,可以通过HTML元素的属性来指定:

<input type="button" value="这是个按钮" onclick="showMessage()" />

上面的input对应的onclick事件处理程序如下:

function showMessage(){
    alert('itbilu.com');
}

上面通过HTML元素属性添加事件处理程序的方式,属于DOM0事件处理程序。通过上面的方式添加会有一定的麻烦,个是HTML与JavaScript代码紧密耦合,对代码修改和维护都造成了不便。


1.2 通过JavaScript添加DOM0事件处理程序

要使用JavaScript指定事件处理程序,首先要获得一个要操作的对象的引用,然后通过其事件处理程序属性(这些属性通常全部小写,例如:onclick),指定事件处理程序。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert('itbilu.com');
}

DOM0级事件处理程序可以认为是元素的方法。删除DOM0级事件处理程序,将相应属性值设置为null即可。

btn.onclick = null;


2. DOM2级事件处理程序

W3C制定的DOM2规范中,其中的DOM 事件规范定义了两个方法:addEventListener()removeEventListener(),分别用于添加事件处理程序和删除事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);

使用DOM2级方法添加事件处理程序时,可以为指定元素添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);
btn.addEventListener("click", showMessage2, false);

删除DOM2级事件处理程序方法如下:

btn.removeEventListener("click", showMessage, false);


attachEvent()与detachEvent()

在早期的IE浏览器,如:IE8中,没有实现addEventListener()removeEventListener(),但提供了两个替代方法attachEvent()detachEvent()。由于Microsoft当前最新的系统Windows 10中,已放弃IEedge浏览器替代,所在attachEvent()detachEvent()已没有意义。