js高级程序设计（十三）事件

事件流

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

事件冒泡

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

<!DOCTYPE html>
<html>
<head>
　　<title>Event Bubbling Example</title>
</head>
<body>
　　<div id="myDiv">Click Me</div>
</body>
</html>

如果你单击了页面中的<div>元素，那么这个click 事件会按照如下顺序传播：

(1) <div>
(2) <body>
(3) <html>
(4) document

也就是说，click 事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直至传播到document 对象。

事件捕获

Netscape Communicator 团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。如果仍以前面的HTML 页面作为演示事件捕获的例子，那么单击<div>元素就会以下列顺序触发click 事件。

(1) document
(2) <html>
(3) <body>
(4) <div>

在事件捕获过程中，document 对象首先接收到click 事件，然后事件沿DOM 树依次向下，一直传播到事件的实际目标，即<div>元素。

虽然事件捕获是Netscape Communicator 唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox 目前也都支持这种事件流模型。尽管“DOM2 级事件”规范要求事件应该从document 对象开始传播，但这些浏览器都是从window 对象开始捕获事件的。
由于老版本的浏览器不支持，因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡，在有特殊需要时再使用事件捕获。

DOM事件流

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

在DOM 事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生，并在事件处理（后面将会讨论这个概念）中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

多数支持DOM 事件流的浏览器都实现了一种特定的行为；即使“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标，但IE9、Safari、Chrome、Firefox 和Opera 9.5 及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

IE9、Opera、Firefox、Chrome 和Safari 都支持DOM 事件流；IE8 及更早版本不支持DOM 事件流。

事件处理程序

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML 特性来指定。这个特性的值应该是能够执行的JavaScript 代码。

<input type="button" value="Click Me" onclick="alert('Clicked')" />

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

<script type="text/javascript">
　　function showMessage(){
　　　　alert("Hello world!");
　　}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

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

<!-- 输出 "click" -->
<input type="button" value="Click Me" onclick="alert(event.type)">

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

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

关于这个动态创建的函数，另一个有意思的地方是它扩展作用域的方式。在这个函数内部，可以像访问局部变量一样访问document 及该元素本身的成员。这个函数使用with 像下面这样扩展作用域：

function(){
　　with(document){
　　　　with(this){
　　　　　　//元素属性值
　　　　}
　　}
}

如此一来，事件处理程序要访问自己的属性就简单多了。下面这行代码与前面的例子效果相同：

<!-- 输出 "Click Me" -->
<input type="button" value="Click Me" onclick="alert(value)">

如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口，这个函数就变成了如下所示：

function(){
　　with(document){
　　　　with(this.form){
　　　　　　with(this){
　　　　　　　　//元素属性值
　　　　　　}
　　　　}
　　}
}

实际上，这样扩展作用域的方式，无非就是想让事件处理程序无需引用表单元素就能访问其他表单字段。

<form method="post">
　　<input type="text" name="username" value="">
　　<input type="button" value="Echo Username" onclick="alert(username.value)">
</form>

在HTML中指定事件处理程序有两个缺点。

首先，存在一个时差问题。因为用户可能会在HTML 元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。

为此，很多HTML 事件处理程序都会被封装在一个try-catch 块中，以便错误不会浮出水面

<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}">

另一个缺点是，这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。

通过HTML 指定事件处理程序的最后一个缺点是HTML 与JavaScript 代码紧密耦合。如果要更换事件处理程序，就要改动两个地方：HTML 代码和JavaScript 代码。而这正是许多开发人员摒弃HTML 事件处理程序，转而使用JavaScript 指定事件处理程序的原因所在。

DOM0 级事件处理程序

通过JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web 浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。要使用JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。
每个元素（包括window 和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序

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

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

也可以删除通过DOM0 级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为null 即可：

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

DOM2 级事件处理程序

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

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!");
}, f alse);

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

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

IE9、Firefox、Safari、Chrome 和Opera 支持DOM2 级事件处理程序。

IE事件处理程序

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

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

在IE 中使用attachEvent()与使用DOM0 级方法的主要区别在于事件处理程序的作用域。在使用DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window。

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

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

这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。单击这个例子中的按钮，首先看到的是"Hello world!"，然后才是"Clicked"。

支持IE 事件处理程序的浏览器有IE 和Opera。

跨浏览器的事件处理程序

第一个要创建的方法是addHandler()，它的职责是视情况分别使用DOM0 级方法、DOM2 级方法或IE 方法来添加事件。这个方法属于一个名叫EventUtil 的对象，本书将使用这个对象来处理浏览器间的差异。addHandler()方法接受3 个参数：要操作的元素、事件名称和事件处理程序函数。

与addHandler()对应的方法是removeHandler()，它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0 级方法。

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;
　　　　}
　　}
};

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

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

addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如在IE 中的作用域问题。不过，使用它们添加和移除事件处理程序还是足够了。此外还要注意，DOM0 级对每个事件只支持一个事件处理程序。

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event 对象，但支持方式不同。

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);

在通过HTML 特性指定事件处理程序时，变量event 中保存着event 对象。

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

在事件处理程序内部，对象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 属性。例如：

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;

要阻止特定事件的默认行为，可以使用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");
　　event.stopPropagation();
};
document.body.onclick = function(event){
　　alert("Body clicked");
};

事件对象的eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么eventPhase 等于1；如果事件处理程序处于目标对象上，则event-Phase 等于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
};

只有在事件处理程序执行期间，event 对象才会存在；一旦事件处理程序执行完成，event 对象就会被销毁。

IE中的事件对象

与访问DOM中的event 对象不同，要访问IE 中的event 对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0 级方法添加事件处理程序时，event 对象作为window 对象的一个属性存在。

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

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

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

如果是通过HTML特性指定的事件处理程序，那么还可以通过一个名叫event 的变量来访问event对象（与DOM 中的事件模型相同）

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

IE 的event 对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的DOM属性和方法。与DOM的event 对象一样，这些属性和方法也会因为事件类型的不同而不同，但所有事件对象都会包含下表所列的属性和方法。

因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this 会始终等于事件目标。故而，最好还是使用event.srcElement 比较保险。

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

returnValue 属性相当于DOM 中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要将returnValue 设置为false，就可以阻止默认行为。

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

cancelBubble 属性与DOM 中的stopPropagation()方法作用相同，都是用来停止事件冒泡的。由于IE 不支持事件捕获，因而只能取消事件冒泡；但stopPropagatioin()可以同时取消事件捕获和冒泡。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
　　alert("Clicked");
　　window.event.cancelBubble = true;
};
document.body.onclick = function(){
　　alert("Body clicked");
};

跨浏览器的事件对象

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;
　　　　}
　　}
};

事件类型

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

UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动（mutation）事件，当底层DOM 结构发生变化时触发。

UI事件

posted @ 2018-01-26 18:10 hahazexia 阅读(159) 评论(0) 收藏举报

hahazexia

js高级程序设计（十三）事件

公告