JavaScript高级程序设计(第三版) 第13章

1### Menu

第13章 事 件

13.2 事件处理程序

• 13.2.1 HTML事件处理程序
• 13.2.2 DOM0 级事件处理程序
• 13.2.3 DOM2 级事件处理程序
• 13.2.4 IE事件处理程序
• 13.2.5 跨浏览器的事件处理程序

13.3 事件对象

• 13.3.1 DOM中的事件对象

13.4 事件类型

• 13.4.1 UI事件
• 13.4.2 焦点事件
• 13.4.3 鼠标与滚轮事件
• 13.4.4 键盘与文本事件
• 13.4.6 变动事件
• 13.4.7 HTML5 事件

13.5 内存和性能

• 13.5.1 事件委托
• 13.5.2 移除事件处理程序

13.6 模拟事件

• 13.6.1 DOM中的事件模拟

---

第13章 事 件

13.2 事件处理程序

13.2.1 HTML事件处理程序

• 这个操作是通过指定 onclick 特性并将一些 JavaScript
  代码作为它的值来定义的。由于这个值是 JavaScript，因此不能在其中使用未经转义的 HTML 语法字符，例如和号（&）、双引号（""）、小于号（<）或大于号（>）。为了避免使用 HTML 实体，这里使用了单引号。如果想要使用双引号，那么就要将代码改写成如下所示：

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

---

13.2.2 DOM0 级事件处理程序

• 使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在
  元素的作用域中运行；换句话说，程序中的 this 引用当前元素。来看一个例子。

click me11.

• 单击按钮，button的字体会变成红色，this就代表当前操作的元素；
• 也可以删除通过 DOM0 级方法指定的事件处理程序；

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

---

13.2.3 DOM2 级事件处理程序

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

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

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

// 会按顺序触发，先alert“mybtn”，再alert“hello world”
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);

• removeEventListener()
  removeEventListener()中的事件处理程序函数必须与传入
  addEventListener()中的相同，如果用匿名函数的话就无法移除；
  有效例子如下：

var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效！

• 大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需
  要，我们不建议在事件捕获阶段注册事件处理程序。

---

• 13.2.5 跨浏览器的事件处理程序
• 第一个要创建的方法是 addHandler()，它的职责是视情况分别使用 DOM0 级方法、 DOM2 级方法，这个方法属于一个名叫 EventUtil 的对象，本书将使用这个对象来处理浏览器间的差异。addHandler()方法接受 3 个参数：要操作的元素、事件名称和事件处理程序函数。
• 这两个方法首先都会检测传入的元素中是否存在 DOM2 级方法。如果存在 DOM2 级方法，则使用该方法：传入事件类型、事件处理程序函数和第三个参数 false（表示冒泡阶段）。注意，为了在 IE8 及更早版本中运行，此时的事件类型必须加上"on"前缀。
  最后一种可能就是使用 DOM0 级方法（在现代浏览器中，应该不会执行这里的代码）。此时，我们使用的是方括号语法来将属性名指定为事件处理程序，或者将属性设置为 null。

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

• 可以像下面这样使用 EventUtil 对象：

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

---

13.3 事件对象

• 13.3.1 DOM中的事件对象
• 兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或 DOM2 级） ，都会传入 event 对象。来看下面的例子。

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

• event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。

  
  
  

  event的属性和方法
  
  
  

  event的属性和方法

• 最新的属性和方法去w3c看；

• 在事件处理程序内部，对象 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
};

• 这个例子检测了 currentTarget 和 target 与 this 的值。由于 click 事件的目标是按钮，因此这三个值是相等的。如果事件处理程序存在于按钮的父节点中（例如 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 属性。例如：

click me11.

• 只有 cancelable 属性设置为 true 的事件，才可以使用 preventDefault()来取消其默认行为。
• 要阻止特定事件的默认行为，可以使用 preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其 href 特性指定的 URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick 事件处理程序可以取消它，如下面的例子所示:

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
};

• 另外， stopPropagation()方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件
  捕获或冒泡。例如，直接添加到一个按钮的事件处理程序可以调用 stopPropagation()，从而避免触
  发注册在 document.body 上面的事件处理程序，如下面的例子所示。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert("Clicked");
    // 调用后，阻止向上冒泡  body注册的onclick就不会运行了。
    event.stopPropagation();
};
document.body.onclick = function(event){
    alert("Body clicked");
};

• 事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么 eventPhase 等于 1；如果事件处理程序处于目标对象上，则 eventPhase 等于 2；如果是在冒泡阶段调用的事件处理程序， eventPhase 等于 3。这里要注意的是，尽管“处于目标”发生在冒泡阶段，但 eventPhase 仍然一直等于 2。来看下面的例子。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.eventPhase); //2
};
document.body.addEventListener("click", function(event){
    alert(event.eventPhase); //1
}, true);
document.body.onclick = function(event){
    alert(event.eventPhase); //3
};

---

13.4 事件类型

• 13.4.1 UI事件
• UI 事件指的是那些不一定与用户操作有关的事件。这些事件在 DOM 规范出现之前，都是以这种或
  那种形式存在的，而在 DOM 规范中保留是为了向后兼容。现有的 UI 事件如下。
  1. load：当页面完全加载后在 window 上面触发，当所有框架都加载完毕时在框架集上面触发，
     当图像加载完毕时在元素上面触发，或者当嵌入的内容加载完毕时在