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

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

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

1. HTML事件处理程序：

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

当单击这个按钮时，就会显示一个警告框，这个操作是通过指定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!”);

},false);

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发，

通过addEventListener()添加的事件处理程序只能使用removeEventListener来移除，移除时传入的参数与添加事件处理程序时使用的参数相同，这也意味着通过addEventListener()添加的匿名函数将无法移除。

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

4. IE事件处理程序

IE实现了与dom中类似的两个方法，attachEvent()和detachEvent()，这两个方法接受项目的两个参数：事件处理程序名称和事件处理程序函数，由于IE只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

例如：

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

btn.attachEvent("onclick", function(){

alert("Clicked");

});

要注意：attachEvent()的第一个参数是“onclick”。

attachEvent()与addEventListener()类似，可以用来为一个元素增加多个事件处理程序。

detachEvent()事件示例：

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

btn.detachEvent("click", function() {

alert(this.id);

});

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

由于DOM2级事件处理程序与IE中的事件处理程序不同，我们可能利用能力检测统一事件处理程序，如下代码所示：

由于知识有限能了解的就这么多，还希望大家指导

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

JAVA查找事件侦听代码_Java自定义事件处理程序和侦听器
我目前正在使用Socket.io的 Java实现,可在此处获取: netty-socketio 我已经启动并运行了服务器,它在客户端和服务器之间很好地接收/发送消息,但是我需要在接收到某些消息时触发事 ...
javascript 高级程序设计_所以 JavaScript 到底是什么？我居然懵了????
前言引用<JavaScript 高级程序设计第四版>中说的话 --"从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到.它很简单,学会用只要几分 ...
读js高级程序设计中有感
我现在都到js高级程序设计最难的章节,第六章,对象,虽然有人推荐不用全部读完,但我还是完整的读一遍吧,一遍可以敲代码一边看书理解加百度,我认为这种方式很好,可以加深理解增强印象,这是我觉得这本书比JS ...
计算机高级程序开发,2017计算机javascript高级程序设计简介
2017计算机javascript高级程序设计简介在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多.下面小编整理的关于计算机javascript高 ...
vue 侦听器侦听对象属性_Spring中的异步和事务性事件侦听器
vue 侦听器侦听对象属性内置的事件发布功能从Spring的早期版本开始存在,并且对于处理同一应用程序上下文中Spring组件之间的基本通信仍然有用. 通常,应用程序可以生成应用程序事件(可以是任意 ...
Spring中的异步和事务性事件侦听器
内置的事件发布功能从Spring的早期版本开始存在,对于处理同一应用程序上下文中Spring组件之间的基本通信仍然有用. 通常,应用程序可以生成应用程序事件(可以是任意对象)并侦听它们. 整个机制非常 ...
Selenium WebDriver中的TestNG侦听器及示例
Java提供了不同的接口,使您可以修改TestNG行为. 这些接口在Selenium WebDriver中进一步称为TestNG侦听器. TestNG Listeners还允许您根据项目要求自定义测试 ...
攻下《JavaScript高级程序设计》——第二章在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/> 本笔记是为了方便日后查阅,仅作学习交 ...

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

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

最新文章

热门文章