第12章事件 (六)

最新推荐文章于 2024-09-26 13:59:40 发布

blinkstar824

最新推荐文章于 2024-09-26 13:59:40 发布

阅读量490

点赞数

分类专栏： JavaScript高级程序设计文章标签：浏览器 function safari div windows javascript

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

53 篇文章 0 订阅

订阅专栏

12.4.5 专有事件

DOM规范没有涵盖所有浏览器支持的所有事件。很多浏览器出于不同的目的 -- 满足用户需求或解决特殊问题，还实现了一些自定义的事件。虽然这些事件不一定会被所有浏览器支持，但仍然有必要在此介绍一下它们的用途。

1.上下文菜单 (contextmenu) 事件

Windows 95 在 PC 中引入了上下文菜单的概念，即通过单击鼠标右键可以调出上下文菜单。不久，这个概念也被引入了 Web 领域。为了实现上下文菜单，开发人员面临的主要问题是如何确定应该显示上下文菜单 (在 Windows 中，是右键单击；在 Mac 中，是 Ctrl+单击)，以及如何屏蔽与该操作关联的默认上下文菜单。为解决这个问题，就出现了 contextmenu 这个事件，用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。

由于 contextmenu 事件是冒泡的，因此可以为 document 指定一个事件处理程序，用以处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素。在所有浏览器中都可以取消这个事件：在兼容 DOM 的浏览器中，使用 event.preventDefalut() ；在 IE 中，将 event.returnValue 的值设置为 false 。因为 contextmenu 事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。通常使用 contextmenu 事件来显示自定义的上下文菜单，而使用 onclick 事件处理程序来隐藏该菜单。以下面的 HTML 页面为例：

<html>
<head>
<title>ContextMenu Event Example</title>
</head>
<body>
	<div id="myDiv">Right click or Ctrl+click me to get a custom context menu.
	Click anywhere eles to get the default context menu.</div>
	<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver">
		<li><a href="http://www.nczonline.net">Nicholas' site</a></li>
		<li><a href="http://www.wrox.com">Wrox site</a></li>
		<li><a href="http://www.yahoo.com">Yahoo!</a></li>
	</ul>
</body>
</html>

这里的 <div> 元素包含一个自定义的上下文菜单。其中，<ul> 元素作为自定义上下文菜单，并且在初始时是隐藏的。实现这个例子的 JavaScript 代码如下所示：

EventUtil.addHandler(window, "load", function(event){
		var div = document.getElementById("myDiv");

		EventUtil.addHandler(div, "contextmenu", function(event){
			event = EventUtil.getEvent(event);
			EventUtil.preventDefault(event);

			var menu = document.getElementById("myMenu");
			menu.style.left = event.clientX + "px";
			menu.style.top = event.clientY + "px";
			menu.style.visibility = "visible";
		});

		EventUtil.addHandler(document, "click", function(event){
			document.getElementById("myMenu").style.visibility = "hidden";
		});
	});

在这个例子中，我们为 <div> 元素添加了 oncontextmenu 事件的处理程序。这个事件处理程序首先会取消默认行为，以保证不显示浏览器默认的上下文菜单。然后，再根据 event 对象 clientX 和 clientY 属性的值，来确定放置 <ul> 元素的位置。最后一步就是通过将 visiblility 属性设置为 "visible" 来显示自定义上下文菜单。另外，还为 document 添加了一个 onclick 事件处理程序，以便用户能够通过鼠标单击来隐藏菜单 (单击也是隐藏系统上下文菜单的默认操作) 。

虽然这个例子很简单，但它却展示了 Web 上所有自定义上下文菜单的基本结果。只需为这个例子中的上下文菜单添加一些 CSS 样式，就可以得到非常棒的效果。

由于 contextmenu 事件非常流行，而且所有浏览器支持它，所以 HTML5也加入了该事件。

2.卸载前 (beforeunload) 事件

之所以有发生在 window 对象上的 beforeunload 事件，是为了让开发人员有可能在页面卸载前阻止这一操作。这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。但是，不能彻底取消这个事件，因为那就相当于让用户无法离开当前页面了。为此，这个事件的意图是将控制权交给用户。显示的消息会告知用户页面行将被卸载 (正因为如此才会显示这个消息)，询问用户是否真的要关闭页面，还是希望继续留下来。

为了显示这个弹出对话框，必须将 event.returnValue 的值设置为要显示给用户的字符串，如下面的例子所示：

EventUtil.addHandler(window, "beforeunload", function(event){

event = EventUtil.getEvent(event);

event.returnValue = "I'm really going to miss you if you go.";

});

IE 和 Firefox 都支持 beforeunload 事件，也都会弹出这个对话框询问用户是否真想离开。Safari 和 Chrome 支持 beforeunload 事件，但不会妨碍事件继续，因而不会显示对话框。Opera 9.5 之前的版本不支持 beforeunload 事件。

由于 beforeunload 事件非常流行，而且所有浏览器都支持它，所以 HTML 5 也加入了该事件。