Events are at the core of your JavaScript application, powering everything and providing the first point of contact when a user interacts with your application. However, this is where JavaScriptrsquo;s unstandardized birth rears its ugly head. At the height of the browser wars, Netscape and Microsoft purposely chose different, incompatible event models. Although they were later standardized by the W3C, Internet Explorer kept its different implementation until its latest release, IE9.
Luckily, we have great libraries like jQuery and Prototype that smooth over the mess, giving you one API that will work with all the event implementations. Still, itrsquo;s worth understanding whatrsquo;s happening behind the scenes, so Irsquo;m going to cover the W3C model here before showing examples for various popular libraries.
Listening to Events
Events revolve around a function called addEventListener(), which takes three arguments: type (e.g., click), listener (i.e., callback), and useCapture (wersquo;ll cover useCap ture later). Using the first two arguments, we can attach a function to a DOM element, which is invoked when that particular event, such as click, is triggered on the element:
var button = document.getElementById('createButton');
button.addEventListener('click', function(){ /* ... */ }, false);
We can remove the listener using removeEventListener(), passing the same arguments we gave addEventListener(). If the listener function is anonymous and therersquo;s no reference to it, it canrsquo;t be removed without destroying the element:
var div = document.getElementById('div');
var listener = function(event) { /* ... */ };
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);
As its first argument, the listener function is passed an event object, which you can use to get information about the event, such as timestamp, coordinates, and target. It also contains various functions to stop the event propagation and prevent the default action.
As for event types, the supported ones vary from browser to browser, but all modern browsers have the following:
bull; click
bull; dblclick
bull; mousemove
bull; mouseover
bull; mouseout
bull; focus
bull; blur
bull; change (for form inputs)
bull; submit (for forms)
Check out Quirksmode, which has a full event compatibility table.
Event Ordering
Before we go any further, itrsquo;s important to discuss event ordering. If an element and one of its ancestors have an event handler for the same event type, which one should fire first when the event is triggered? Well, you wonrsquo;t be surprised to hear that Netscape and Microsoft had different ideas.
Netscape 4 supported event capturing, which triggers event listeners from the top-most ancestor to the element in question—i.e., from the outside in.
Microsoft endorsed event bubbling, which triggers event listeners from the element, propagating up through its ancestors—i.e., from the inside out.
Event bubbling makes more sense to me, and it is likely to be the model used in dayto-day development. The W3C compromised and stipulated support for both event models in their specification. Events conforming to the W3C model are first captured until they reach the target element; then, they bubble up again.
You can choose the type of event handler you want to register, capturing or bubbling, which is where the useCapture argument to addEventListener() comes into the picture. If the last argument to addEventListener() is true, the event handler is set for the capturing phase; if it is false, the event handler is set for the bubbling phase:
// Use bubbling by passing false as the last argument
button.addEventListener('click', function(){ /* ... */ }, false);
The vast majority of the time, yoursquo;ll probably be using event bubbling. If in doubt, pass false as the last argument to addEventListener().
Canceling Events
When the event is bubbling up, you can stop its progress with the stopPropagation() function, located on the event object. Any handlers on ancestor elements wonrsquo;t be invoked:
button.addEventListener('click', function(e){
e.stopPropagation();
/* ... */ },
false);
Additionally, some libraries like jQuery support a stopImmediatePropagation() function, preventing any further handlers from being called at all—even if theyrsquo;re on the same element.
Browsers also give default actions to events. For example, when you click on a link, the browserrsquo;s default action is to load a new page, or when you click on a checkbox, the browser checks it. This default action happens after all the event propagation phases and can be canceled during any one of those. You can prevent the default action with the preventDefault() function on the event object. Alternatively, you can just return false from the handler:
form.addEventListener('submit', function(e){
/* ... */
return confirm('Are you super sure?');
}, false);
If the call to confirm() returns false—i.e., the user clicks cancel in the confirmation dialog—the event callback function will return false, canceling the event and form submission.
The Event Object
As well as the aforementioned functions—stopPropagation() and preventDefault()— the event object contains a lot of useful properties. Most of the properties in the W3C specification are documented below; for more information, see the full specification.
Type of event:
Bubbles
A boolean indicating whether the event bubbles up through the DOM
Properties reflecting the environment when the event was executed:
button
A value indicating which, if any, mouse button(s) was pressed
ctrlKey
A boolean indicating whether the Ctrl key was pressed
altKey
A bool
剩余内容已隐藏，支付完成后下载完整资料
事件和监听
事件是 JavaScript 应用程序的核心，是所有内容的驱动，它决定了在应用程序产生用户交互的起始时刻。然而在 JavaScript 诞生之初“事件”的实现并不标准，甚至非常丑陋。在之后的浏览器大战中网景和微软分道扬镳，他们各自实现的事件模型互不兼容。尽管后来 W3C 对此做了标准化，但 IE 仍然坚持使用与 W3C 不兼容的事件模型，直到最新发布的 IE9 才遵循标准。
幸运的是，有很多诸如 jQuery 和 Prototye 的类库很好地处理了兼容性问题，对外提供了统一的 API 来实现事件。但是了解事件的机制仍然是非常重要的，因此这里首先讲解W3C 中的事件模型，然后展示各种流行类库的一些实例。
监听事件
绑定事件监听的函数叫做 addEventListener()，它有 3 个参数 ：type（比如 click），listener（比如 callback）及 useCapture（后续会讲到 useCapture）。使用前两个参数可以给一个 DOM 元素绑定一个函数，当特定的事件（比如点击）被触发时执行这个函数：
var button = document.getElementById('createButton');
button.addEventListener('click', function(){ /* ... */ }, false);
可以使用 removeEventListener() 来移除事件监听，参数和传入 addEventListener() 的一样。如果监听的函数是匿名函数，没有任何引用指向它，在不销毁这个元素的前提下，这个监听是无法被移除的 ：
var div = document.getElementById('div');
var listener = function(event) { /* ... */ };
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);
带入 listener 函数的第 1 个参数是 event 对象，通过 event 对象可以得到事件的相关信息，比如时间戳、坐标和事件宿主元素（target）。它同样包含很多方法来停止事件冒泡和阻止事件的默认行为。不同的浏览器对事件类型的支持也不尽相同，但所有现代浏览器都支持这些事件 ：
y click
y dblclick
y mousemove
y mouseover
y mouseout
y focus
y blur
y change（表单输入框特有）
y submit（表单特有）
可以从 PPK 的文章中（http://goo.gl/l7Zqk）查看怪异模式支持的事件类型。
事件顺序
在进一步讨论之前，很有必要介绍一下事件顺序。如果一个节点和它的一个父节点都绑定了相同事件类型的回调，当事件触发时哪个回调会先执行？尽管网景和微软的处理方式不一致，也不要太过担心。
Netscape 4 支持事件捕捉（capturing），从顶层的父节点开始触发事件，从外到内传播。
微软则支持事件冒泡（bubbling），从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。我认为事件冒泡看起来更合理一些，这也是我们日常开发所用的事件模型。W3C 对此做了让步，将对这两种事件模型的支持都加入标准规范之中。根据 W3C 模型，事件首先被目标元素所捕捉，然后向上冒泡。
你 可 以 自 行 选 择 要 注 册 的 事 件 处 理 程 序 的 调 用 类 型， 捕 捉 或 冒 泡，通 过 给addEventListener() 传入第 3 个参数 useCapture 来设置。如果 addEventListener() 的最后一个参数是 true，事件处理程序以捕捉模式触发 ；如果是 false，事件处理程序以冒泡模式触发 ：
// 给最后一个参数传入 false，来设置事件冒泡
button.addEventListener('click', function(){ /* ... */ }, false);
大多数情况下我们都在使用冒泡模式，如果对此不太确定，可以给 addEventListener()的最后一个参数传入 false。
取消事件
当事件冒泡时，可以通过 stopPropagation() 函数来终止冒泡，这个函数是 event 对象中的方法。比如这段代码，任何父节点的事件回调都不会触发 ：
button.addEventListener('click', function(e){
e.stopPropagation();
/* ... */
}, false);
此外，一些类库比如 jQuery 还支持 stopImmediatePropagation() 函数，用来阻止后续所有的事件触发——哪怕这些事件是注册在同一个节点元素上的也不例外。
浏览器同样给事件赋予了默认行为。比如，当你点击一个链接时，浏览器的默认行为是载入新页面，当点击一个复选框时，浏览器会将其选中（或取消选中）。在事件传播阶段（之后）会触发这些默认行为，在任何一个事件处理程序中都可以阻止默认行为。可以通过调用 event 对象的 preventDefault() 函数来阻止默认行为，同样也可以通过在回调中返回 false 来实现同样的效果 ：
bform.addEventListener('submit', function(e){
/* ... */
return confirm('Are you super sure?');
}, false);
如果调用 confirm() 返回 false（用户点击了对话框的取消按钮），这个事件回调函数就返回 false，这样就会取消事件，阻止表单的提交。
事件对象
和上面提到的函数 stopPropagation() 和 preventDefault() 一样，event 对象还包含很多有用的属性。W3C 规范中包含的大部分属性都列在下面，更多信息请参照完整的标准规范（http://www.w3.org/TR/DOM-Level-2-Events/）。
事件类型 ：
bubbles ：
布尔值，表示事件是否通过 DOM 以冒泡形式触发。
事件发生时，反映当前环境信息的属性 ：
button ：
表示（如果有）鼠标所按下的按钮。
ctrlKey ：
布尔值，表示 Ctrl 键是否按下。
altKey ：
布尔值，表示 Alt 键是否按下。
shiftKey ：
布尔值，表示 Shift 键是否按下。
metaKey ：
布尔值，表示 Meta 键注 1 是否按下。
表示键盘事件的属性 ：
isChar ：
布尔值，表示当前按下的键是否表示一个字符。
charCode ：
表示当前按键的 unicode 值（仅对 keypress 事件有效）。
keyCode ：
表示非字符按键的 unicode 值。
which ：
表示当前按键的 unicode 值，不管当前按键是否表示一个字符。
事件发生时的环境参数 ：
pageX，pageY ：
事件发生时相对于页面（如 viewport 区域）的坐标。
screenX，screenY ：
事件发生时相对于屏幕的坐标。
和事件相关的元素 ：
currentTarget ：
事件冒泡阶段所在的当前 DOM 元素。
target,originalTarget ：
原始的 DOM 元素。
relatedTarget ：
其他和事件相关的 DOM 元素（如果有的话）。
不同的浏览器对这些属性的兼容性也不同，尤其是那些不兼容 W3C 的浏览器。幸运的是，诸如 jQuery 和 Prototype 这些类库为我们解决了这些兼容性问题。
事件库
很多时候我们仅仅是将 JavaScript 类库用于事件管理，毕竟手动处理众多浏览器的差异性吃力不讨好。现在我为大家介绍如何使用 jQuery 的 API 来做事件管理，当然使用其他的类库也是不错的选择，比如 Prototype（http://www.prototypejs.org/），MooTools（http://mootools.net/）和 YUI（http://developer.yahoo.com/yui）。可以参照更多更深入的文档来获取它们各自的 API 信息。
jQuery 的 API 提供了 bind() 函数用来跨浏览器绑定事件监听。在一个 jQuery 实例上调用此函数，传入事件名称和回调函数 ：
jQuery('#element').bind(eventName, handler);
比如，给一个元素注册点击事件 ：
jQuery('#element').bind('click', function(event) {
// ...
});
jQuery 提供了一些常用事件的快捷方法，比如 click、submit 和 mouseover。看这段代码：
$('#myDiv').click(function(){
// ...
});
需要注意的是，使用这个方法之前要确保 DOM 元素是存在的，这一点很重要。例如，应当在页面载入完成后绑定事件，因此需要绑定 window 的 load 事件，然后添加监听 ：
jQuery(window).bind('load', function() {
$('#signinForm').submit(checkForm);
});
然而，还有一个比监听 window 的 load 事件更好的方法，即 DOMContentLoaded。当DOM 构建完成时触发这个事件，这时图片和样式表可能还未加载完毕。这也就是说这个事件一定会在用户和页面产生交互之前触发。并不是所有的浏览器都支持 DOMContentLoaded，因此 jQuery 将它融入了 ready() 函数，这个函数是兼容各个浏览器的 ：
jQuery.ready(function($)){
$('#myForm'). bind('submit', function(){ /*...*/});
});
实际上，可以不用 ready() 函数而直接将回调函数写入 jQuery 对象。
jQuery(function($){
// 当页面内容可用时调用
});
切换上下文
关于事件有一点经常让人感到迷惑，那就是调用事件回调函数时上下文的切换。当使用浏览器内置的 addEventListener() 时，上下文从局部变量切换为目标 HTML 元素 ：
new function(){
this.appName = 'wem';
document.body.addEventListener('click', function(e){
// 上下文发生改变，因此 appName 是 undefined
alert(this.appName);
}, false);
};
要想保持原有的上下文，需要将回调函数包装进一个匿名函数，然后定义一个引用指
向它。我们在第 1 章已经提到这种模式，即使用代理函数来保持当前的上下文。这在jQuery 中也是一种很常用的模式，包括一个 proxy() 函数，只需将指定的上下文传入函数即可 ：
$('signinForm').submit($.proxy(function(){ /* ... */ }, this));
委托事件
从事件冒泡时开始就发生了事件委托，我们可以直接给父元素绑定事件监听，用来检测在其子元素内发生的事件。这也是类似 SproutCore（http://www.sproutcore.com/）这种框架所使用的技术，用来减少应用中的事件监听的数量 ：
// 在 ul 列表上做了事件委托
list.addEventListener('click', function(e){
if (e.currentTarget.tagName == 'li') {
/* ... */
return false;
}
}, false);
jQuery 的处理方式更妙，只需给 delegate() 函数传入子元素的选择器、事件类型
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[29766]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
