读《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）心得

电玩女神 2022-06-01 13:11 163阅读 0赞

今天读了《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）部分的内容，总结一些自己的心得：

事件就是用户或者浏览器自身执行的某种动作。例如click 、load 、mouseover等等，都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的方式分为以下几种：

**1. HTML事件处理程序：**

在HTML中定义事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的具体脚本，如：

<input  type="button"  value="Click me"  οnclick="alert("Clicked")"/>

当单击这个按钮时，就会显示一个警告框，这个操作是通过指定onclick特性并将一些javaScript代码作为它的值来定义的。

function showMsg()\{

alert("Hello world!");

</script>

在这个例子中，单击按钮就会调用showMsg()函数，这个函数是在一个独立的<script>元素中定义的，当然也可以被包含在一个外部文件中，事件处理程序中的代码执行时，有权访问全局作用域中的任何代码，

但是在HTML中指定事件处理程序有两个缺点：

**1 .存在一个时差问题：**

因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。以前面的例子来说，showMsg()函数是在按钮下面、页面的底部定义的，如果用户在页面解析showMsg()函数之前就单击了按钮，就会引发错误。为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面。如下面的例子所示：

**2. HTML与javaScript代码紧密耦合**

如果要更换事件处理程序，就要改动两个地方：html代码和JavaScript代码，而这正是许多开发人员摒弃HTML事件处理程序，转而使用JavaScript指定事件处理程序的原因所在。

**2. DOM0级事件处理程序**

通过JavaScript指定事件处理程序的方式，就是将一个函数赋值给一个事件处理程序的属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象引用。

每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如：

var btn=document.getElementById("myBtn");

btn.οnclick=function()\{

alert("Clicked");

\};

在此，我们通过文档对象取得了一个按钮的引用，然后为它指定了onclick事件处理程序，但是有一点需要注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就有可能在一段时间内点击没有反应。

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行的，也就是说，程序中的this引用当前。例如：

var btn=document.getElementById("myBtn");

btn.οnclick=function()\{

alert(this.id);

\};

单击按钮显示的是元素的ID，实际上可以在事件处理程序中通过this访问元素的任何属性和方法，以这种方式添加的事件处理程序属性会在事件流的冒泡阶段被处理。

也可以删除通过DOM0级的方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为null就可以了：

btn.οnclick=null;  //删除事件处理程序

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

**3. DOM2级事件处理程序**

“**DOM2级事件**”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener().所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名称、作为事件处理程序的函数 、一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

要在按钮上为click事件添加事件处理程序，可以使用下列代码：

var btn=document.getElementById("myBtn");

btn.addEventListener("click", function()\{

alert(this.id);

\},false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多高事件处理程序，例如：

var btn=document.getElementById("myBtn");

btn.addEventListener("click", function()\{

alert(this.id);

\},false);

btn.addEventListener("click", function()\{

alert(“Hello world!”);