web前端之JavaScript高级程序设计六事件课案Word文档格式.docx

web前端之JavaScript高级程序设计六事件课案Word文档格式.docx

《web前端之JavaScript高级程序设计六事件课案Word文档格式.docx》由会员分享，可在线阅读，更多相关《web前端之JavaScript高级程序设计六事件课案Word文档格式.docx（26页珍藏版）》请在冰豆网上搜索。

由于老版本的浏览器不支持，因此很少有人使用事件捕获。

我们也建议读者放心地使用事件冒泡，在有特殊需要时再使用事件捕获。

DOM事件流：

“DOM2级事件”规定的事件流包括三个阶段：

事件捕获阶段、处于目标阶段和事件冒泡阶段。

首先发生的是事件捕获，为截获事件提供了机会。

然后是实际的目标接收到事件。

最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

事件处理程序：

事件就是用户或浏览器自身执行的某种动作。

诸如click、load和mouseover，都是事件的名字。

而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。

事件处理程序的名字以”on”开头，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。

为事件指定处理程序的方式有好几种。

HTML事件处理程序：

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。

这个特性的值应该是能够执行的JavaScript代码。

例如，要在按钮被单击时执行一些JavaScript：

<

!

DOCTYPEhtmlPUBLIC"

-//W3C//DTDXHTML1.1//EN"

"

http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"

>

htmlxmlns="

//www.w3.org/1999/xhtml"

xml:

lang="

en"

head>

metahttp-equiv="

Content-Type"

content="

text/html;

charset=UTF-8"

title>

事件<

/title>

scripttype="

text/javascript"

functionshowMessage（）{

alert（"

HelloWorld!

"

）;

}

/script>

/head>

body>

<

inputtype="

button"

value="

Clickme"

onclick="

showMessage（）"

/body>

/html>

在这个例子中，单击按钮就会调用showMessage（）函数。

这个函数是在一个独立的script元素中定义的，当然也可以被包含在一个外部文件中。

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

这样指定事件处理程序具有一些独到之处。

首先，这样会创建一个封装着元素属性值的函数。

这个函数中有一个局部变量event，也就是事件对象（后续的学习中会有涉及）：

ClickMe"

alert（event.type）"

通过event变量，可以直接访问事件对象，你不用自己定义它，也不用从函数的参数列表中读取。

在这个函数内部，this值等于事件的目标元素，例如：

alert（this.value）"

DOM0级事件处理程序：

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。

原因一是简单，二是具有跨浏览器的优势。

要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的引用。

每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。

将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：

window.onload=function（）{

varbtn=document.getElementById（"

myBtn"

btn.onclick=function（）{

Clicked"

};

};

id="

ClickedMe"

btn.onclick=null;

//删除事件处理程序

将事件处理程序设置为null之后，再单击按钮将不会有任何动作发生。

DOM2级事件处理程序：

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：

addEventListener（）和removeEventListener（）。

所有DOM节点中都包含这两个方法，并且它们都接受3个参数：

要处理的事件名、作为事件处理程序的函数和一个布尔值。

最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；

如果是false，表示在冒泡阶段调用事件处理程序。

btn.addEventListener（"

click"

function（）{

alert（this.id）;

},false）;

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

HelloWord"

这里为按钮添加了两个事件处理程序。

这两个事件处理程序会按照添加它们的顺序触发，因此首先会显示元素的ID，其次会显示”Helloworld!

”消息。

通过addEventListener（）添加的事件处理程序只能使用removeEventListener（）来移除；

移除时传入的参数与添加处理程序时使用的参数相同。

这也意味着通过addEventListener（）添加的匿名函数将无法移除，如下面的例子所示：

btn.removeEventListener（"

function（）{//无效

在这个例子中，我们使用addEventListener（）添加了一个事件处理程序。

虽然调用removeEventListener（）时看似使用了相同的参数，但实际上，第二个参数与传入addEventListener（）中的那一个是完全不同的函数。

而传入removeEventListener（）中的事件处理程序函数必须与传入addEventListener（）中的相同，如下面的例子所示。

varhandler=function（）{

handler,false）;

重写后的这个例子没有问题，是因为在addEventListener（）和removeEventListener（）中使用了相同的函数。

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。

最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。

如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

IE事件处理程序：

IE实现了与DOM中类似的两个方法：

attachEvent（）和detachEvent（）。

这两个方法接受相同的两个参数：

事件处理程序名称与事件处理程序函数。

由于IE8及更早版本只支持事件冒泡，所以通过attachEvent（）添加的事件处理程序都会被添加到冒泡阶段。

btn.attachEvent（"

onclick"

}）;

1.注意，attachEvent（）的第一个参数是”onclick”，而非DOM的addEventListener（）方法中的”click”。

2.在IE中使用attachEvent（）与使用DOM0级方法的主要区别在于事件处理程序的作用域。

在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；

在使用attachEvent（）方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。

3.与addEventListener（）类似，attachEvent（）方法也可以用来为一个元素添加多个事件处理程序。

这里调用了两次attachEvent（），为同一个按钮添加了两个不同的事件处理程序。

不过，与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。

单击这个例子中的按钮，首先看到的是”Helloworld!

”，然后才是”Clicked”。

handler）;

btn.detachEvent（"

使用attachEvent（）添加的事件可以通过detachEvent（）来移除，条件是必须提供相同的参数。

与DOM方法一样，这也意味着添加的匿名函数将不能被移除。

不过，只要能够将对相同函数的引用传给detachEvent（），就可以移除相应的事件处理程序。

跨浏览器的事件处理程序：

跨浏览器兼容<

varEventUtil={

addHandler:

function（element,type,handler）{

if（element.addEventListener）{

element.addEventListener（type,handler,false）;

}elseif（element.attachEvent）{

element.attachEvent（"

on"

+type,handler）;

}else{

element["

+type]=handler;

}

removeHandler:

if（element.removeEventListener）{

element.removeEventListener（type,handler,false）;

}elseif（element.detachEvent）{

element.detachEvent（"

+type]=null;

这两个方法首先都会检测传入的元素中是否存在DOM2级方法。

如果存在DOM2级方法，则使用该方法：

传入事件类型、事件处理程序函数和第三个参数false（表示冒泡阶段）。

如果存在的是IE的方法，则采取第二种方案。

注意，为了在IE8及更早版本中运行，此时的事件类型必须加上”on”前缀。

最后一种可能就是使用DOM0级方法。

完整代码：