JavaScript 高级程序设计(第13章 事件)

第13章 事件

1. 事件流

事件流描述的是从页面中接收事件的顺序。

(1) 事件冒泡

IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深 的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。

(2) 事件捕获

Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在 事件到达预定目标之前捕获它。

(4) DOM事件流

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

2. 事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover,都是事件的名字。 而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头,因此 click 事件的事件处理程序就是 onclick,load 事件的事件处理程序就是 onload。

(1) HTML事件处理程序

1. 某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。这个 特性的值应该是能够执行的 JavaScript 代码。
2. JavaScript代码不能在其中使用未经转义的 HTML 语法字符, 例如和号(&)、双引号("")、小于号(<)或大于号(>)。
3. 事件处理程序中的代码在执行时,有权访问全局作用 域中的任何代码。
4. 会创建一个封装着元素属性值的函数，这个函数中有一个局部变量 event,也就是事件对象,通过 event 变量,可以直接访问事件对象。

5. 在这个函数内部,this 值等于事件的目标元素。

(2) DOM0 级事件处理程序

var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        alert("Clicked");
    };

1. 使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序是在元素的作用域中运行;换句话说,程序中的 this 引用当前元素。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(this.id);    //"myBtn"
};

2. 删除事件处理程序

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

(3) DOM2 级事件处理程序

addEventListener() 和 removeEventListener()方法：

1. 所有 DOM 节点中都包含这两个方法,并且它们都接受3 个参数:要处 理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true,表示在捕获 阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。

2. 与 DOM0 级方法一样,这里添加的事件处理程序也是在其依附的元素的作用域 中运行。
3. 使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,事件处理程序会按照添加它们的顺序触发。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);
btn.addEventListener("click", function(){
    alert("Hello world!");
}, false);

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

(4) IE事件处理程序

attachEvent()和 detachEvent()方法：

1. 这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。
2. 由于 IE8 及更早版本只支持事件冒泡,所以通过 attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
3. attachEvent()的第一个参数是"onclick",而非 DOM 的 addEventListener()方法中 的"click"。
4. 使用 attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此 this 等于 window。
5. 事件处理程序不是以添加它们的顺序执行,而是以相反的顺序被触发。

(5) 跨浏览器的事件处理程序

EventUtil 的对象,本书将使用这个对象来处理浏览器间的差异。

1. 该对象有一个addHandler()方法，它的职责是视情况分别使用 DOM0 级方法、DOM2 级方 法或 IE 方法来添加事件。addHandler()方法接受3 个参数:要操作的元素、事件名称和事件处理程序函数。
2. removeHandler(),它也接受相同的参数,这个方法的职责是移除之前添加的事件处理程序。

var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        } 
    }
};

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler); 
//这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler);

3. 事件对象

在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

(1) DOM中的事件对象

event对象的属性和方法

1. 在事件处理程序内部,对象 this 始终等于 currentTarget 的值,而target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则 this、currentTarget 和 target 包含相同 的值。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.currentTarget === this);//true
    alert(event.target === this);//true
};

2. 如果事件处理程序存在于按钮的父节点中(例如 document.body),那么这些值是 不相同的。

document.body.onclick = function(event){ 
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true 
alert(event.target === document.getElementById("myBtn"));//true
};

通过一个函数处理多个事件时,可以使用 type 属性:

var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
        case "click":
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor = "red";
            break;
        case "mouseout":
            event.target.style.backgroundColor = "";
            break;
} 
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

(2) IE中的事件对象

1. 在使用DOM0 级方法添加事件处理程序时,event 对象作为 window 对象的一个属性存在。

var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        var event = window.event;
        alert(event.type);     //"click"
};

2. 如果事件处理程序是使用 attachEvent()添加的,那 么就会有一个 event 对象作为参数被传入事件处理程序函数中。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){ alert(event.type); //"click"
});

3. DOM0 级事件处理程序是在元素的作用域中运行,this 引用当前元素，使用 attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此 this 等于 window。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(window.event.srcElement === this);
};
btn.attachEvent("onclick", function(event){
    alert(event.srcElement === this);
});

(3) 跨浏览器的事件对象

var EventUtil = {
        addHandler: function(element, type, handler){
        //省略的代码 
        },
        getEvent: function(event){
            return event ? event : window.event;
        },
        getTarget: function(event){
            return event.target || event.srcElement;
        },
        preventDefault: function(event){
            if (event.preventDefault){
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        removeHandler: function(element, type, handler){
        //省略的代码
       },
       stopPropagation: function(event){
            if (event.stopPropagation){
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
       }
};

4. 事件类型

DOM3 级事件”规定了以下几类事件:

(1) UI(User Interface,用户界面)事件,当用户与页面上的元素交互时触发;
(2) 焦点事件,当元素获得或失去焦点时触发;
(3) 鼠标事件,当用户通过鼠标在页面上执行操作时触发;
(4) 滚轮事件,当使用鼠标滚轮(或类似设备)时触发;
(5) 文本事件,当在文档中输入文本时触发;
(6) 键盘事件,当用户通过键盘在页面上执行操作时触发;
(7) 合成事件,当为 IME(Input Method Editor,输入法编辑器)输入字符时触发;
(8) 变动(mutation)事件,当底层 DOM 结构发生变化时触发。
(9) 变动名称事件,当元素或属性名变动时触发。此类事件已经被废弃,没有任何浏览器实现它们,因此本章不做介绍。

(1) UI事件

UI 事件如下:

1. DOMActivate:表示元素已经被用户操作(通过鼠标或键盘)激活。这个事件在 DOM3 级事 件中被废弃,但 Firefox 2+和 Chrome 支持它。考虑到不同浏览器实现的差异,不建议使用这个 事件。
2. load:当页面完全加载后在 window 上面触发,当所有框架都加载完毕时在框架集上面触发, 当图像加载完毕时在元素上面触发,或者当嵌入的内容加载完毕时在