第12章事件 (三)

最新推荐文章于 2024-09-18 19:31:08 发布

blinkstar824

最新推荐文章于 2024-09-18 19:31:08 发布

阅读量443

点赞数

分类专栏： JavaScript高级程序设计文章标签： function 浏览器 ie button html javascript

JavaScript高级程序设计专栏收录该内容

53 篇文章 0 订阅

订阅专栏

12.3 事件对象

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

12.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.type 属性表示的事件类型。这个属性始终都会包含被触发的事件类型，例如 "click" (与传入 addEventListener() 和 removeEventListener() 中的事件类型一致)。

在通过 HTML 特性指定事件处理程序时，变量 event 中保存着 event 对象。请看下面的例子：

以这种方式提供 event 对象，可以让 HTML 特性事件处理程序与 JavaScript 函数执行相同的操作。

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

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

};

当单击这个例子中的按钮时， this 和 currentTarget 都等于 document.body ，因为事件处理程序是注册到这个元素上的。然而， target 元素却等于按钮元素，因为它是 click 事件的真正的目标。由于按钮上并没有注册事件处理程序，结果 click 事件就冒泡到了 document.body，在那里事件才得到了处理。

在需要通过一个函数处理多个事件时，可以使用 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;

这个例子定义了一个名为 handler 的函数，用于处理3种事件：click、mouseover 和 mouseout。当单击按钮时，会出现一个与前面例子中一样的警告框。当按钮移动到按钮上面时，背景颜色应该会变成红色，而当鼠标移动出按钮的范围时，背景颜色应该会恢复为默认值。这里通过检测 event.type 属性，让函数能够确定发生了什么事件，并执行相应的操作。

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

var link = document.getElementById("myLink");

link.onclick = function(event){

event.preventDefault();

};

只有 cancelable 属性设置为 true 的事件，才可以使用 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");

};

对于这个例子而言，如果不调用 stopPropagation()，就会在单击按钮时出现两个警告框。可是，由于 click 事件根本不会传播到 document.body，因此就不会触发注册在这个元素上的 onclick 事件处理程序。

事件对象的 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

};

当单击这个例子中的按钮时，首先执行的事件处理程序是在捕获阶段触发的添加到 document.body 中的那一个，结果会弹出一个警告框显示表示 eventPhase 的1 。接着，会触发在按钮上注册的事件处理程序，此时的 eventPhase 值为 2 。最后一个被触发的事件处理程序，是在冒泡阶段执行的添加到 document.body 上的那一个，显示 eventPhase 的值为 3 。而当 eventPhase 等于 2 时， this 、target 和 currentTarget 始终都是相等的。

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

12.3.2 IE中的事件对象

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

var btn = document.getElementById("myBtn");

btn.onclick = function(){

var event = window.event;

alert(event.type); // "click"

};

在此，我们通过 window.event 取得了 event 对象，并检测了被触发事件的类型 (IE中的 type 属性与 DOM 中的 type 属性是相同的)。可是，如果事件处理程序是使用 attachEvent() 添加的，那么就会有一个 event 对象作为参数被传入事件处理程序函数中，如下所示：

var btn = document.getElementById("myBtn");

btn.attachEvent("onclick", function(event){

alert(event.type); // "click"

});

在像这样使用 attachEvent() 的情况下，也可以通过 window 对象来访问 event 对象，就像使用 DOM0 级方法一样。不过为方便起见，同一个对象也会作为参数传递。

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

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

});

在第一个事件处理程序中 (使用 DOM0 级方法指定的)，srcElement 属性等于 this ，但在第二个事件处理程序中，这两者的值不相同。

如前所述，returnValue 属性相当于 DOM 中的 preventDefault() 方法，它们的作用都是取消给定事件的默认行为。只要将 returnValue 设置为 false ，就可以阻止默认行为。来看下面的例子：

var link = document.getElementById("myLink");

link.onclick = function(){

window.event.returnValue = false;

};

这个例子在 onclick 事件处理程序中使用 returnValue 达到了阻止链接默认行为的目的。与 DOM 不同的是，在此没有办法确定事件是否能被取消。

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

var btn = document.getElementById("myBtn");

btn.onclick = function(){

alert("Clicked");

window.event.cancelBubble = true;

};

document.body.onclick = function(){

alert("Body clicked");

};

通过在 onclick 事件处理程序中将 cancelBubble 设置为 true，就可以阻止事件通过冒泡而触发 document.body 中注册的事件处理程序。结果，在单击按钮之后，只会显示一个警告框。

12.3.3 跨浏览器的事件对象

虽然 DOM 和 IE 中的 event 对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。IE中 event 对象的全部信息和方法 DOM 对象中都有，只不过实现方式不一样。不过，这种对应关系让实现两种事件模型之间的映射非常容易。可以对前面介绍的 EventUtil 对象加以增强，添加如下方法以求同存异：

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

以上代码显示，我们为 EventUtil 添加了4个新方法。第一个是 getEvent()，它返回对 event 对象的引用。考虑到 IE 中事件对象的位置不同，可以使用这个方法来取得 event 对象，而不必担心指定事件处理程序的方式。在使用这个方法时，必须假设有一个事件对象传入到事件处理程序中，而且要把该变量传给这个方法，如下所示：

btn.onclick = function(event){

event = EventUtil.getEvent(event);

};

在兼容 DOM 的浏览器中，event 变量只是简单地传入和返回。而在 IE 中，event 参数是未定义的 (undefined)，因此就会返回 window.event。将这一行代码添加到事件处理程序的开头，就可以确保随时都能使用 event 对象，而不必担心用户使用的是什么浏览器。

第二个方法是 getTarget()，它返回事件的目标。在这个方法内部，会检测 event 对象的 target 属性，如果存在则返回该属性的值；否则，返回 srcElement 属性的值。可以像下面这样使用这个方法：

btn.onclick = function(event) {

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

};

第三个方法是 preventDefault()，用于取消事件的默认行为。在传入 event 对象后，这个方法会检查是否存在 preventDefalut() 方法，如果存在则调用该方法。如果 preventDefalut() 方法不存在，则将 returnValue 设置为 false。下面是使用这个方法的例子：

var link = document.getElementById("myLink");

link.onclick = function(event) {

event = Event.getEvent(event);

EventUtil.preventDefault(event);

}

以上代码可以确保在所有浏览器中单击该链接都不会打开另一个页面。首先，使用 EventUtil.getEvent() 取得 event 对象，然后将其传入到 EventUtil.preventDefault() 以取消默认行为。

第四个方法是 stopPropagation()，其实现方式类似。首先尝试使用 DOM 方法阻止事件流，否则就使用 cancelBubble 属性。下面看一个例子：

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

alert("Clicked");

event = EventUtil.getEvent(event);

EventUtil.stopPropagation(event);