您的位置：首页 > Web前端 > JavaScript

JavaScript中为事件指定处理程序的五种方式分析

2018-07-27 09:55 761 查看

本文实例讲述了JavaScript中为事件指定处理程序的五种方式。分享给大家供大家参考，具体如下：

JavaScript和HTML之间的交互是通过事件实现的。

IE9、Firefox、Opera、Sarifi、Chrome都已经实现了DOM2级事件模块的核心部分，IE8是最后一个仍然使用其专有事件系统的主要浏览器。

事件流：

事件流描述的是从页面中接受事件的顺序，但IE和Netscape却提出了完全相反的事件流的概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

1) 事件冒泡

事件开始时由最具体的元素（文档中嵌套层次最深的那个节点接收，然后逐级向上传播到较为不具体的节点（文档）。

不支持事件冒泡的事件：blur、focus、load、unload。

2) 事件捕获

不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。

虽然IE9、Safari、Chrome、Firefox、Opera都支持事件捕获和事件冒泡，但IE8及其更早版本只支持事件冒泡，不支持事件捕获，因此。建议使用事件冒泡，在有特殊需要的时候再使用事件捕获。

DOM事件流：

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。实际上，在事件捕获阶段预定目标不会接收到事件，处于目标阶段事件在预定目标上发生。事件处理中，处于目标阶段被看成事件冒泡阶段的一部分。但是，即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但IE9、 Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件，结果是有两个机会在目标对象上操作事 件。

IE9、Firefox、Opera、Sarifi、Chrome都支持DOM事件流，IE8及其更早版本不支持DOM事件流。

事件处理程序：

事件就是用户或浏览器自身执行的某种动作，而响应某个事件的函数就是事件处理程序（或事件侦听器），事件处理程序的名字以“on”开头。

JavaScript中有五种事件处理程序方式：

1) HTML事件处理程序

每种事件都可以使用一个与相应事件处理程序同名的HTML特性来指定，特性的值可以是能够执行的JavaScript代码，也可以是函数。函数中有一个局部变量event，通过event变量可以访问事件对象；在函数内部，this值等于事件的目标元素。

在HTML中指定事件处理程序的几个缺点：

①　时差问题：用户可能在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件，如用户在解析事件处理函数之前就触发事件。为此，很多HTML事件处理程序都会封装在一个try-catch块中，以便及时捕获错误，以免错误抛出被用户看到。

②　扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果。不同JavaScript引擎遵循的标识符解析规则略有差异，很有可能会在访问非限定对象成员时出错。

③　HTML代码与JavaScript代码紧密耦合，更换事件处理程序需要改动HTML代码与JavaScript代码。

2) DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此this引用当前元素。

DOM0级事件处理程序的优势：

①　简单；

②　跨浏览器

可以通过将事件处理程序的值设置为null来删除通过DOM0级方法指定的事件处理程序。

3) DOM2级事件处理程序

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

addEventListener()
和
removeEventListener()
，它们都接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）。

DOM2级事件处理程序的优势：

可以添加多个事件处理程序，它们会按照添加它们的顺序触发。

通过

addEventListener()
添加的事件处理程序只能用
removeEventListener()
来移除，但要求移除时传入的参数与添加事件处理程序时使用的参数相同，因此通过
addEventListener()
添加的匿名函数将无法移除，需要给
removeEventListener()
传入
addEventListener()
中命名的函数才能正常移除。

4) IE事件处理程序

IE事件定义了两个方法：

attachEvent()
和
detachEvent()
，它们都接收2个参数：要处理的事件名、作为事件处理程序的函数.由于IE8及其更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

注意：通过IE的

attachEvent()
添加的事件处理程序的名字以“on”开头，而通过DOM的
addEventListener()
添加的名字不是。

在IE中使用

attachEvent()
与使用DOM0级方法的主要区别：

事件处理程序的作用域不同。在IE中使用attachEvent()，事件处理程序会在全局作用域中运行，因此this等于window；而使用DOM0级方法，事件处理程序会在其所属元素的作用域中运行。

在IE中使用

attachEvent()
与使用DOM2级方法的区别：

添加多个事件处理程序的执行顺序不同。在IE中使用attachEvent()，可以添加多个事件处理程序，它们会按照添加它们的相反顺序触发；在DOM中使用

addEventListener()
，可以添加多个事件处理程序，但它们会按照添加它们的顺序触发。

通过

attachEvent()
添加的事件处理程序只能用
detachEvent()
来移除，但要求移除时传入的参数与添加事件处理程序时使用的参数相同，因此通过
attachEvent()
添加的匿名函数将无法移除，需要给
detachEvent()
传入
attachEvent()
中命名的函数才能正常移除。

5) 跨浏览器的事件处理程序

要保证事件处理程序的代码在大多数浏览器下一致地运行，只需关注冒泡阶段。

视情况分别使用DOM2级方法、IE方法、DOM0级方法来添加和移除事件，

addHandler()
和
removeHandler()
方法属于EventUtil对象。

①　先检测传入的元素是否存在DOM2级方法（传入的第三个参数为false以表示冒泡阶段）；

②　再检测传入的元素是否存在IE的方法；

③　最后检测传入的元素是否存在DOM0级方法（使用方括号语法将属性名指定为事件处理程序）。

var EventUtil = {
addHandler:function(element, type, handler) {
if (element.addEventListener)
element.addEventListener(type, handler, false);
else if (element.attachEvent)
element.attachEvent("on" + type, handler);
else
element["on" + type] = handler;
},
removeHandler:function(element, type, handler) {
if (element.removeEventListener)
element.removeEventListener(type, handler, false);
else if (element.detachEvent)
element.detachEvent(“on” + type, handler);
else
element["on" + type] = null;
}
}

PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JavaScript 事件 处理程序
相关文章推荐
新的分享
章节导航