web前端之JavaScript高级程序设计六：事件

最新推荐文章于 2018-04-29 02:01:49 发布

VIP文章爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2018-04-29 02:01:49 发布

阅读量2.7k

点赞数 4

分类专栏： web前端 JavaScript JavaScript高级程序设计文章标签： javascript web前端

本文链接：https://blog.csdn.net/u014785563/article/details/53705944

版权

web前端之JavaScript高级程序设计六：事件

JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript 代码）与页面的外观（HTML 和 CSS 代码）之间的松散耦合。

事件流：

事件流描述的是从页面中接收事件的顺序。但有意思的是， IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。 IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕获流。

事件冒泡：

IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
也就是说， click 事件首先在div元素上发生，而这个元素就是我们单击的元素。然后，click事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。
这里写图片描述

事件捕获：

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

这里写图片描述

由于老版本的浏览器不支持，因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡，在有特殊需要时再使用事件捕获。

DOM事件流：

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
这里写图片描述

事件处理程序：

事件就是用户或浏览器自身执行的某种动作。诸如 click、 load 和 mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以”on”开头，因此click 事件的事件处理程序就是 onclick， load 事件的事件处理程序就是 onload。为事件指定处理程序的方式有好几种。

HTML事件处理程序：

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。这个特性的值应该是能够执行的 JavaScript 代码。例如，要在按钮被单击时执行一些 JavaScript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>事件</title>
<script type="text/javascript">
function showMessage(){
    
    alert("Hello World!");
}
</script>
</head>
<body>
    <input type="button" value="Click me" onclick="showMessage()">
</body>
</html>

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

这样指定事件处理程序具有一些独到之处。首先，这样会创建一个封装着元素属性值的函数。这个函数中有一个局部变量 event，也就是事件对象（后续的学习中会有涉及）：

<input type="button" value="Click Me" onclick="alert(event.type)">

通过 event 变量，可以直接访问事件对象，你不用自己定义它，也不用从函数的参数列表中读取。
在这个函数内部， this 值等于事件的目标元素，例如：

<input type="button" value="Click Me" onclick="alert(this.value)">

DOM0 级事件处理程序：

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

每个元素（包括 window 和 document）都有自己的事件处理程序属性，这些属性通常全部小写，例如 onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>事件</title>
<script type="text/javascript">
window.onload=function(){
    
    var btn=document.getElementById("myBtn");
    btn.onclick=function(){
    
        alert("Clicked");
    };
};
</script>
</head>
<body>
    <input type="button" id="myBtn" value="Clicked Me">
</body>
</html>

btn.onclick = null; //删除事件处理程序
将事件处理程序设置为 null 之后，再单击按钮将不会有任何动作发生。

DOM2 级事件处理程序：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>事件</title>
<script type="text/javascript">
window.onload=function(){
    
    var btn=document.getElementById("myBtn");
    btn.addEventListener("click",function(){
    
        alert(this.id);
    },false);
};
</script>
</head>
<body>
    <input type="button" id="myBtn" value="Clicked Me">
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>事件</title>
<script type="text/javascript">
window.onload=function(){
    
    var btn=document.getElementById("myBtn");
    btn.addEventListener("click",function(){
    
        alert(this.id);
    },false);
    btn.addEventListener("click",function(){
    
        alert("Hello Word");
    },false);
};
</script>
</head>
<body>
    <input type="button" id="myBtn" value="Clicked Me">
</body>
</html>

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发，因此首先会显示元素的ID，其次会显示”Hello world!”消息。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<

最低0.47元/天解锁文章

爸爸去哪了2之熊猫三胞胎

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
web前端之JavaScript高级程序设计六：事件

JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript 代码）与页面的外观（HTML 和 CSS 代码）之间的松散耦合。<h3>**事件流：**事件流描述的是从页面中接收事件的顺序。但有意思的是，
复制链接

扫一扫