javascript 中的事件处理

javascript 中的事件处理

词汇：

事件 event
事件处理 event handling

内容：

事件是js程序的心脏。下面我将要讲述什么是event handling,他存在什么问题
，以及如何书写跨浏览器的脚本。

可以说没有event 就没有 Js.网上的任何网页只要有js，就有事件发生，
其实原因很简单，js的目的就是为了使得用户和页面进行交互：你在页面上做一些事情，页面进行回应。

为了知道对用户的动作如何进行响应，以及响应什么，js需要检查用户的动作。
事件就伴随着用户的动作发生。当然还有一些事件并不是直接由用户引起：比如页面加载时候发生的Load事件。

js能够检查到这些事件的发生。从netscape2 开始，我们就给Html中的元素（大部分的链接和表单元素）添加了事件处理程序。

事件处理程序在某一事件被触发的时候发生，比如：单击一个链接。其实事件处理程序就是一段js代码。也就是说某事件发生的时候
我们可以定义它来调用我们定义好的某段代码。这样的话就可以产生交互。

事件处理程序的历史：
就像我之前说的那样，没有事件处理就没有Js（没有存在的意义）。什么是最好的脚本？能够对用户的动作做出反应的就是好代码。
当Netscape2 产生的时候，他支持Js,也就是说它开始支持 event handling.

Netscape model

Netscape 2 仅支持很少的几个事件。Mouseover and mouseout 事件由于能够产生很好的变化效果受到了极大的欢迎。
表单提交和复位（submit and reset)，客户端验证也得到了支持。表单元素获得或失去焦点（focus）事件，以及页面是否加载完成也获得了支持。
这些事件现在看起来都很基本，但在当时已经是一个革命性的大事，因为网页可以对用户的动作做出反应了。

In its most ancient form an event handler looks like this. When the user clicks on this link, the event handler is executed and the alert pops up.
最早的事件处理看起来是这样子，当用户点击这个链接，事件处理程序开始执行，一个 alert 框弹出来。
 < a href="somewhere.html" onclick="alert('I/'ve been clicked!')">

这样子的事件处理就是Netscape的标准，对于其他的浏览器包括ie，如果想要js运行，就得遵守这个规则。

Modern event models 现在的事件模型

However, since the introduction of these simple event handlers much has changed.
First of all the number of events has increased. Also, the way of registering event handlers to HTML elements was changed.
They can now be set entirely through JavaScript.
No more need for huge numbers of event handlers cluttering up your code,
now you could write a simple script that sets all event handlers for you.
现在大部分的事件处理都变化了。
首先事件的数量增加了。然后注册时间处理程序的方法也多了。
现在我们可以全部使用Js来进行设置了。不用再每个元素都写一堆代码了，我们可以使用一段简单的脚本就设置一堆的事件处理程序。

The Version 4 browsers also provided more information about the event itself.
Where was the mouse when the event happened?
Was any key pressed?
Finally, browser vendors had to decide what happened when an element and its parent element both had a handler for the same event. Which event fires first?

对于事件本身，我们也可以获得一些他们的信息了。比如鼠标事件，我们可以知道当事件发生的时候，我们的老鼠在哪里？
是否有键盘的按键被按下？浏览器还得决定当子元素和父元素的同一个事件被触发的时候，我们先调用哪个事件处理程序？

浏览器之间的战争伴随着这些问题爆发了，netscape和ie 各有各的标准，后来w3c也加入了进来，发布了他们的 规范，虽然也有各种各样的缺点，但也解决了很多问题。
三种模型的存在从此也就意味着浏览器对于事件的处理不再有一样的行为。

浏览器兼容性问题：
为了使我们的代码能够正常工作，我们需要先进行一个检查性工作，比如：

if (Netscape) {//现在更多可能是进行 firefox等的检查
    use Netscape model
}
else if (Explorer) {
    use Microsoft model
}
这个检查措施只是初步的检查，因为他舍弃了另外一小部分浏览器。
有时候我们还使用其他一些检查，比如：navigator.userAgent，和 document.all
但是对于Opera来说并不支持。
那我们怎么办呢？我们可以针对每一个浏览器写一些处理代码，但是这太复杂了。
我们可以看看这些问题，或许可以找到答案：
1。都有哪些事件？
很多。当然一些事件只存在于某一个模型中。
2。如何给Html元素注册事件处理？
有四种方式：内联，传统，w3c和微软方式。
内联方式工作于所有的模型中。
3。如何阻止事件的默认行为？
你可以在事件处理程序中返回false,这个已经成为标准。
4。如何获得事件的信息？
有两种方式：Netscape/w3c 和微软方式。
需要参考：http://www.quirksmode.org/js/events_access.html
5。父元素和子元素哪个先执行事件处理程序？
这个问题影响很小，确实需要的话仅需两行代码。
书写跨浏览器代码的Js的技巧就是不使用浏览器检查，而是按照上面的顺序回答问题。
首先选择一个注册模型，然后保证事件被浏览器访问到，读出他的属性，然后解决子元素父元素的调用顺序问题就可以了。
这样就可以解决浏览器的兼容性问题了。
对于哪些事件浏览器可以使用，需要访问：http://www.quirksmode.org/js/events_events.html

现在我们开始看看代码：
1。注册事件处理
有四种模型：Inline,traditional,w3c和Microsoft
最好使用traditional,它是跨浏览器的。
代码如下：
element.onclick = doSomething;
if(element.captureEvents) element.captureEvents(Event.CLICK);
当我们点击element元素，doSomething函数就会被调用。
2。访问事件
当我们注册完，我们就开始书写doSomething函数，通常你可能会访问事件本身，这样你可以使用事件的一些信息。
代码如下：
funciton doSomething(e){
    if(!e) var e = window.event;
    //e 指的就是事件本身
}
现在e在所有的浏览器中都指的是被触发的事件。

3。访问Html元素
有时候你还想访问触发事件的Html 元素。
有两种方式可以做到这点：
使用 this 关键字，或者使用 target/srcElement 属性。
最安全的方式是使用 this关键字 ，虽然有时候也会出错，但是和传统的注册模型结合使用最好。
function doSomething(e) {
    if (!e) var e = window.event
    // e 指的是事件本身
    // this 指向触发事件的Html 元素，其实也是处理事件的元素
    // target/srcElement 也指向触发事件的Html 元素
}

4。访问事件的属性
这一步是兼容性最差的。为了访问事件具有的属性，一定要记住一点：
是否存在该属性，然后再使用它。
代码：
function doSomething(e) {
    if (!e) var e = window.event
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
}
对于e的属性，你可以参考：http://www.quirksmode.org/js/events_properties.html
5。事件处理程序的执行顺序
现在你需要决定如果子元素和父元素都具有同一事件的处理程序时候，先调用哪个？
这个顺序的问题有三种方式：可以参考：http://www.quirksmode.org/js/events_order.html
如果想要单击子元素的时候，并不触发父元素，那么可以使用下面的代码：
function doSomething(e) {
    if (!e) var e = window.event
    // handle event
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

好了，终于结束了，现在你可以书写事件处理程序了，
当然最后提醒一下各位：要书写有逻辑的代码，否则用户们会不知所措的。