JS 与 html 之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器 (或处理程序) 来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。本文将介绍 JS 事件相关的基础知识。
一、事件流
事件流描述的是从页面中接受事件的顺序。
事件冒泡
事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收,然后逐级向上传播到较为不具体的结点(文档)。以下面 HTML 页面为例,如果你点击了页面中的按钮,那么 "click" 事件会按照 <button>、<body>、<html>、document 的顺序传播。换句话说,事件冒泡指的就是事件从底层触发事件的元素开始沿着 DOM 树向上传播,直到 document 对象。
- <html>
- <head>
- <title>
- Test
- </title>
- </head>
- <body>
- <button id="myBtn">
- A Btn
- </button>
- </body>
- </html>
事件捕获
与事件冒泡的思路相反,事件捕获的思想是不太具体的节点应该更早地接收到事件,最具体的结点应该最后才接收事件。同样还是上面那个例子,点击页面中的按钮之后,"click" 事件会按照 document、<html>、<body>、<button> 的顺序传播。换句话说,事件捕获就是指事件从 document 对象开始沿着 DOM 树向下传播,直到事件的实际目标元素。
DOM 事件流
"DOM2 级事件" 规定的事件包括三个阶段: 事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。
还是以之前的点击按钮为例,在 DOM 事件流中,捕获阶段,"click" 事件从 document 开始向下传递到 body 元素 (注意,实际目标 button 在捕获阶段不会接收到事件)。目标阶段,button 元素接收到 "click" 事件。最后,冒泡阶段,事件又被传播回文档。
二、事件处理程序
事件是用户或浏览器自身执行的某种动作,而响应某个事件的函数就叫做事件处理程序或事件侦听器。
HTML 事件处理程序
这里的 HTML 事件处理程序指的是直接在 HTML 元素里面通过特性 (attribute) 定义的事件处理程序,请看下面的代码示例。这样是定的事件处理程序会创建一个封装着元素属性值的函数,this 值等于事件的目标元素。通过这种方法指定事件处理程序存在不少缺点,不推荐使用。
- <button onclick="alert('HaHa~')">
- Btn-1
- </button>
- <button onclick="alert('event.type')">
- Btn-2
- </button>
- <button onclick="handler()">
- Btn-3
- </button>
- <script type="text/javascript">
- function handler() {
- alert("Haha~");
- }
- </script>
DOM0 级事件处理程序
通过 JS 指定事件处理程序的传统方式就是将一个函数赋值给一个事件处理程序属性,请看下面代码示例。通过这种方式指定的事件处理程序是在元素的作用域中运行,this 引用的是当前元素。这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。若要删除事件,直接令 onclick 的值为空即可。
- var btn = document.getElementById("myBtn");
- btn.onclick = function() {
- console.log("this.id"); // "myBtn"
- };
- // 删除事件处理程序
- btn.onclick = null;
DOM2 级事件处理程序
"DOM2 级事件" 定义了两个方法用于指定和删除事件处理程序,addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法。这两个方法都接收 3 个参数,要处理的事件、处理函数、布尔值。最后的布尔值为 true 时表示在捕获阶段调用事件处理程序,为 false 时表示在冒泡阶段调用处理程序。与 DOM0 级方法一样,这里添加的事件处理程序也是在其依附的元素的作用域中运行。DOM2 级方法添加事件处理程序的优势是可以添加多个事件处理程序。这些事件处理程序会按照它们被添加的顺序触发。下面是代码示例:
- var btn = document.getElementById("myBtn");
- // 添加,触发点击事件时先输出"myBtn"再输出"HaHa~"
- btn.addEventListener("click",
- function() {
- console.log(this.id);
- },
- false);
- btn.addEventListener("click",
- function() {
- console.log("HaHa~");
- },
- false);
通过 addEventListener() 添加的事件只能通过 removeEventListener() 来删除。删除时传入的参数与添加时使用的参数应该保持一致。这也意味着通过 addEventListener() 添加的匿名函数将无法删除,因为无法将添加时传递的匿名函数传给 removeEventListener(),即便在删除的时候写了一个一模一样的函数,但此时这个函数只是一个新的匿名函数。请看下面代码示例:
- var btn = document.getElementById("myBtn");
- // 无法删除匿名函数
- btn.addEventListener("click",
- function() {
- console.log(this.id);
- },
- false);
- btn.removeEventListener("click",
- function() {
- console.log(this.id);
- },
- false);
- // 正确的添加和删除方式
- function handler() {
- console.log(this.id);
- }
- btn.addEventListener("click", handler, false);
- btn.removeEventListener("click", handler, false);
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候才将事件处理程序添加到捕获阶段。JS 高级程序设计上给出的建议是,如果不是特别需要,不建议在事件捕获阶段注册事件处理程序。
IE 事件处理程序
IE 实现了与 DOM 中类似的两个方法: attachEvent() 和 deleteEvent()。这两个方法接收两个参数,事件处理程序名称和事件处理程序。注意,第一个参数是事件处理程序名称而不是事件名称,也就是说在注册点击事件的处理程序时应该传入 "onclick" 而不是 "click",这里跟 DOM 的方法有些差别。另外,这两个方法注册的事件处理程序是在全局作用域中运行而不是元素作用域,this 的值指向 window。还有一点需要特别小心,通过 attachEvent() 方法也可以添加多个事件处理程序,但是它们的执行顺序却不是按照它们被添加的顺序,而是完全相反,跟 DOM 方法截然不同。突然觉得 IE 真的特别反人类~~~ 下面是代码示例:
- var btn = document.getElementById("myBtn");
- function handler1() { // ... }
- function handler2() { // ... }
- // 添加,触发点击事件时先执行handler2再执行handler1
- btn.attachEvent("onclick", handler1);
- btn.attachEvent("onclick", handler2);
- // 删除
- btn.deleteEvent("onclick", handler1);
- btn.deleteEvent("onclick", handler2);
三、事件对象
在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息,包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
DOM 中的事件对象
兼容 DOM 的浏览器会将一个 event 对象传入事件处理程序中,无论指定事件处理程序时用的是 DOM0 还是 DOM2 的方法,都会传入 event 对象。event 对象只有在事件处理程序执行期间才会存在,一旦事件处理程序执行完毕,event 对象就会被销毁。下面是代码示例:
- var btn = document.getElementById("myBtn");
- btn.onclick = function(event) {
- console.log(event.type); // "click"
- }
- btn.addEventListener("click",
- function(event) {
- console.log(event.type);
- },
- false);
event 对象包含与创建它的特定事件有关的属性和方法,触发的事件类型不一样,可用的属性方法也有所不同。但是所有的事件都会有下列的属性或方法:
下面代码示例展示了上述部分属性的用法,也可以帮助我们进一步理解事件流。假设页面中有一个按钮 "myBtn"。当点击按钮时,this 和 currentTarget 都等于 body 元素,因为事件处理程序是注册在 body 元素上。target 的值却等于按钮元素,因为它是 click 事件的真正目标。由于按钮上没有注册事件处理程序,结果 "click" 事件冒泡到了 document.body 那里才得到处理。
- document.body.onclick = function(event) {
- console.log(event.currentTarget === document.body); // true
- console.log(this === document.body); // true
- console.log(event.target === document.getElementById("myBtn")); // true
- };
再看一个例子,下面代码中,stopPropagation() 方法取消了事件的进一步捕获或冒泡。当我点击按钮时,本来应该会因为事件冒泡机制触发按钮和 body 元素上的点击事件处理程序,输出"From Bth …"和"From Body …"。现在点击事件在按钮元素上触发之后就被阻止继续在 DOM 层次中的传播,因此 body 上的事件处理程序不会被触发。
- var btn = document.getElementById("myBtn");
- btn.onclick = function(event) {
- console.log("From Bth ...");
- event.stopPropagation(); // 停止事件传播
- };
- document.body.onclick = function() {
- console.log("From Body ...");
- };
IE 中的事件对象
在 IE 中,使用 DOM0 的方法添加事件处理程序时,event 对象作为 window 对象的一个属性存在。如果是通过 attachEvent() 方法添加,则 event 对象是作为参数传入事件处理函数。下面是代码示例:
- var btn = document.getElementById("myBtn");
- btn.onclick = function() {
- var event = window.event;
- console.log(event.type); // "click"
- };
- btn.attachEvent("onclick",
- function(event) {
- console.log(event.type); // "click"
- });
IE 的 event 对象同样也包含与创建它的事件相关的属性和方法,这些属性和方法也会因为事件类型的不同而有所差异。但所有事件对象都会包含下列属性:
在 IE 中,事件处理程序的作用域是根据指定它的方式来确定,this 的值不一定是指向事件的目标元素。因此,使用 srcElement 属性更具保险。请看下面代码实例,第一种方式中 this 的值为目标元素,而第二种方式,前面讲过这种方式的事件处理程序是在全局作用域中执行,因此 this 的值为 window。
- var btn = document.getElementById("myBtn");
- btn.onclick = function() {
- console.log(window.event.srcElement === this); // true
- }
- btn.attachEvent("onclick",
- function(event) {
- console.log(event.srcElement === this); // false
- });
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
来源: http://www.jb51.net/article/110205.htm