探索JavaScript中的五个事件处理程序

我们知道JavaScript和HTML之间的交互是通过事件来实现的。事件最早出现在IE3和Netscape Navigator 2中，作为分担服务器计算负载的一种手段。一般来说，事件是由用户或浏览器本身执行的操作。事件处理程序是响应事件的函数。提取主干，即事件处理程序是一个函数。我们也称事件处理程序为事件监听器。事件处理程序以“on”开头，因此on事件的时间处理程序是onclick。JavaScript中大致有五种时间处理程序，我们将根据这五种不同的时间处理程序分五部分介绍。

1.HTML事件处理程序

2.DOM0级事件处理程序

3.DOM2级事件处理程序

4.IE事件处理程序

5.跨浏览器事件处理程序

第一部分：HTML事件处理程序

是什么让HTML事件处理程序？显然，你可以从名字中猜出它是一个卸载HTML的函数(事件处理程序)。初学者使用的大多数事件处理程序都是HTML事件处理程序。以下示例：

例1:

按钮onclick='alert('success ')'单击我/按钮，这是事件处理程序。点击按钮后，会弹出一个弹出框，表示成功。

特点：HTML事件处理程序中的JavaScript代码是onclick特性的值，所以我们不能在Javascript代码中使用非转义的HTML语法字符，比如(&)、' '(双引号)、(小于号)、(大于号)等等。所以在这个例子中，我用单引号代替了双引号。参见下文，在JavaScript代码中使用非转义的HTML语法字符。

例2:

button onclick=' alert(' success ')' click me/button此时，我在success外使用了HTML语法字符' '(双引号)，窗口不会弹出，但会报告语法错误。但是如果我仍然想使用双引号呢？此时，HTML中的语法字符应该替换为“实体”。如下例所示：

例3:

按钮onclick='alert('success ')'单击我/按钮！-正常弹出窗口-在本例中，我们使用HTML实体来代替JavaScript代码中的HTML语法字符，因此我们不会报告错误。

例4:

按钮onclick='show()'单击我/按钮！-正常弹出窗口-脚本函数show(){ alert(' success ')；}/script在这个例子中，我们调用函数，将函数定义放在脚本中，这也是可以的。因为事件处理程序中的代码在执行时可以访问全局范围内的任何代码。这句话怎么理解？实际上，我们可以观察chrome中按钮标签的范围链。如下图所示：

接下来，让我们看看脚本的范围，如下图所示：

您可以看到脚本标签在全局范围内。

也就是说，目前button中的HTML事件处理程序处于作用域链的最前端，而Script处于全局作用域，因此“事件处理程序中的代码在执行时有权访问全局作用域中的任何代码。”这句话不难理解。

例5:

按钮onclick=' alert(事件。键入)'单击我/按钮。浏览器弹出窗口显示：单击。这个例子是什么意思？请注意，我没有在event.type中放一个单引号，这意味着它不是字符串。实际上，事件是一个本地对象——当DOM上的一个事件被触发时，会生成一个事件对象事件，它包含了与事件相关的所有信息。这是弹出的对象类型，点击。

HTML事件处理程序的三个缺点(要点):

1.时差。因为HTML元素一出现，用户就可能开始触发相应的事件，有可能事件的脚本(比如例4脚本中show()函数的函数定义)还没有加载，此时不满足执行条件，所以报错。

解决方法：将HTML事件处理程序封装在try-catch块中，这样就不会出现错误。

input type=' button ' value=' click me ' onclick=' try { show()；}catch(ex){}'2。以这种方式扩展事件实例程序的范围链，会在不同的浏览器中导致不同的结果(示例4中，我在chrome中查看了范围链，但其他浏览器可能不是这样的，请注意)。不同的JavaScript引擎遵循略有不同的标识符解析规则，这可能会导致访问非限定对象成员时出错。

3.HTML和JavaScript代码是紧密耦合的。因此，如果要替换事件处理程序，必须更改两个地方——HTML代码和JavaScript代码。

那么如何解决以上问题呢？DOM0级别的事件处理程序是个不错的选择！

第2部分：DOM0级事件处理程序

DOM0级别的事件处理程序也被广泛使用。之所以成为DOM0级别，是因为当时没有DOM标准，IE和网景Navigator都使用了时间处理程序(不知道是否合理，请批评指正)。总之，我们先来看看下面的例子。

示例6:

Button id='button '点击我/button脚本var button=document . getelementbyid(' button ')；button . onclick=function(){ alert(' clicked ')；}/script意味着我们首先获取脚本中元素的引用，然后给onclick事件处理程序分配一个函数。如前所述，事件处理程序是一个函数，button.onclick的形式意味着函数是对象的方法。然后，对象的方法(即事件处理程序)在元素(对象)的范围内运行，而不是在全局范围内运行，因为该方法属于对象。(注意：示例4中的事件处理程序在全局范围内运行。).如果这个关键字存在于这个函数中，那么它将指向这个对象。接下来，我们证明事件处理程序在浏览器中的元素范围内运行。

我们看到警报('点击')；它确实在按钮中运行。

我们还可以通过以下方式删除DOM0级别方法指定的事件处理程序。

button.onclick=null通过以上分析，我们可以知道DOM0事件处理程序非常优秀，它解决了HTML事件处理程序的三个缺点：时间差、范围链导致的不同浏览器性能不一致、HTML和JavaScript之间的紧密耦合。

但是，DOM0事件处理程序并不完美，它还有两个缺点：

1.我们不能同时向一个元素添加两个事件。

2.我们无法控制元素的事件流(捕获或冒泡)。

第二个问题后面会提到，第一个问题举例如下：

Button id='button '点击我/button脚本var button=document . getelementbyid(' button ')；button . onclick=function(){ alert(' clicked ')；} button . onclick=function(){ alert('再次')；}虽然我为同一个元素设置了两个事件处理程序，但最终的结果是只有第二个事件有效(覆盖第一个事件)。当然，人类是智慧动物，DOM2事件很好地解决了这个问题！

第三部分：DOM2级事件处理程序

DOM2级事件处理程序定义了两种方法：

AddEventListener()-add event listener removeEventListener()-delete event listener在这篇博文的开头，我提到了事件处理程序，也就是事件监听器。这两种方法都接收三个参数：

1.要处理的事件名称(注意：是时间名称，所以没有on！)，如点击、鼠标悬停等。

2.作为事件处理程序的函数，如function(){ alert(' clicked ')；}

3.指示事件流模式的布尔值。如果为True，则调用冒泡阶段的事件处理程序；True调用捕获阶段的事件处理程序。

下面举两个例子来加深我们的理解：

例7:

Button id='button '点击我/button脚本var button=document . getelementbyid(' button ')；button.addEventListener('click ')，function(){ alert(this . id)；}，false)；button.addEventListener('click '，function(){ alert('另一个事件')；}，false)；/script结果：第一个弹出窗口：按钮。

第二个弹出窗口：另一个事件。

结论：我们可以通过DOM2事件处理程序将两个或多个事件添加到同一个元素中。事件按顺序触发。这也指向当前元素，所以函数在元素的范围内执行。

这个分析：和前面的DOM0级别的事件处理程序一样，这里的addEventListener也可以看作是一个对象方法。不同的是，DOM0级别的方法需要另一个函数来赋值，但是这里的方法是由DOM2级别的规范预定义的。

删除事件处理程序的方法RemoveEventListener()，值得注意：用addEventListener()添加的事件处理程序只能通过它移除，需要传入相同的参数。

例8:

Button id='button '点击我/button脚本var button=document . getelementbyid(' button ')；button.addEventListener('click ')，function(){ alert(this . id)；}，false)；button . removeeventlistener(' click '，function(){ alert('另一个事件')；}，false)；上面的代码看似可以移除click的事件处理程序，但实验证明这是不可能的，因为事件处理程序在为匿名函数时是无法移除的。请看下面成功删除的例子：

例9:

Button id='button '点击我/button脚本var button=document . getelementbyid(' button ')；函数handler(){ alert(this . id)；} button . addeventlistener(' click '，handler，false)；button . removeeventlistener(' click '，处理程序，false)；/script成功删除！

注：1。传入方法的处理程序没有()，因为这里所有的函数都是定义的，而不是调用的，这需要注意。

2.这两个方法的第三个参数为false，即事件处理程序被添加到冒泡阶段。通常不使用true，因为早期版本的IE不支持捕获阶段。

DOM2事件处理程序成功解决了之前所有事件处理程序的问题，堪称完美！然而，总是独一无二的IE浏览器有了新的花样，它也有自己的一套事件处理程序。让我们来看看。

第四部分：工业工程事件处理器

IE事件处理程序中有两种类似于DOM2事件处理程序的方法：

1.attachEvent()

2 .分离事件()

它们都接收两个参数：

1.事件处理程序的名称。比如onclick和onmouseover，注意：这不是一个事件，而是事件处理程序的名称，所以有on。

2.事件处理函数。例如function(){ alert(' clicked ')；}

之所以没有第三个类似于DOM2级别事件处理程序的参数，是因为IE8和更早的版本只支持冒泡事件流。

注意：

1.1中attachEvent()的事件处理程序的范围。IE事件处理程序不同于DOM0和DOM2，它的范围在全局范围内。因此，与DOM0和DOM2中的这个点元素不同，IE中的这个点元素指向窗口。

2.同样，我们可以使用attachEvent()向同一个元素添加多个事件处理程序。但是与DOM2不同的是，事件触发的顺序不是添加的顺序，而是相反的添加顺序。

3.同样，通过attachEvent()添加的事件处理程序也必须通过disconnectevent()方法移除。同样，不能使用匿名函数。

4.支持IE事件处理程序的浏览器不仅仅是IE浏览器，还有Opera浏览器。

第五部分：跨浏览器事件处理程序

其实这部分被认为是跨浏览器的，所以就把前面的部分结合起来。

这部分需要创建两种方法：

AddHandler() -此方法的职责是使用DOM0级别、DOM2级别和IE事件处理程序来适当添加事件。RemoveHandler() -此方法用于移除用addHandler添加的事件。这两种方法接收相同的三个参数：

1.要操作的元素-通过dom方法获得

2.事件名称-注意：没有on，比如click，mouseover3。事件处理函数——即处理函数

这两种方法的构造如下：

var事件util={ addhandler :函数(元素，类型，处理程序){ if(元素。addevent listener){元素。addevent侦听器(类型，处理程序，假)；//注意：这里默认使用了假（冒泡)} else if(元素。attachevent){元素。attachevent(' on '类型，处理程序);} else { element[' on ' type]=handler；} }，removeHandler:function(元素，类型，处理程序){ if(元素。removeeventlistener){元素。removeeventlistener(类型，处理程序，假)；//注意：这里默认使用了假（冒泡)} else if(元素。单独的通风口){元素。独立通风口(' on '类型，处理程序);} else { type]上的元素['为null } } }即先判断DOM2级事件处理程序，再判断工业管理学(工业工程)事件处理程序，最后使用DOM0级事件处理程序。

例10:通过这个例子来使用上面构造的方法。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题跨浏览器事件处理程序/标题/床头柜按钮id='button '点我/buttonscriptvar EventUtil={ addhandler :函数(元素、类型、处理程序){ if(元素。addeventlistener){元素。addeventlistener(类型、处理程序，假)；//注意：这里默认使用了假（冒泡)} else if(元素。attachevent){元素。attachevent(' on '类型，处理程序);} else { element[' on ' type]=handler；} }，removeHandler:function(元素，类型，处理程序){ if(元素。removeeventlistener){元素。removeeventlistener(类型，处理程序，假)；//注意：这里默认使用了假（冒泡)} else if(元素。单独的通风口){元素。独立通风口(' on '类型，处理程序);} else { type]上的元素['为null } } }函数处理程序(){ alert(' clicked ')；} var button=文档。getelementbyid(' button ')；EventUtil.addHandler(按钮，‘点击’，处理程序)；/脚本/正文/html最后浏览器成功弹出单击了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。