javascript 事件处理

 W3C calls the target of the event target, while Microsoft calls it srcElement。

w3c把时间的目标对象称为target，而微软称之为srcElement。

事件分为3类。

• Mouse events, caused by a certain mouse action.

• Keyboard events, caused by a certain key action.

• Interface events, 接口事件which fire when something happens to the page, for instance, when a form is submitted or the page unloads.

Mouse events

The common mouse events are click, dblclick, mousedown, mousemove, mouseout, mouseover, and mouseup. They are available on all HTML elements. In addition, we'll discuss the Microsoft proprietary mouseenter and mouseleave events.

Mousedown and mouseup

The mousedown event occurs when the user depresses 按下 the mouse button. The mouseup event occurs when the user releases the mouse button. They are very popular in drag-and-drop scripts (mousedown: user selects item, mousemove: user moves item, mouseup: user releases item), but otherwise you'll rarely need them.

 

click 事件发生在一个元素收到一个mousedown事件并紧跟一个mouseup事件的时候，它是最常用的鼠标事件。

当用户设置焦点到一个元素上并按下回车键时，click事件也会被触发，所以，它是唯一一个具备可访问性的鼠标事件。

Keyboard events

The keyboard events are keydown, keypress, and keyup. Generally they are available on all text-accepting HTML elements such as form fields, as well as on links, forms, and the document.

接口事件是间接（indirect）事件，他们在用户执行某个有着“特殊含义”special meaning的鼠标或按键动作时产生，举例来说。
如果用户点击了一个提交按钮，按钮触发了一个click事件，然后，submit接口事件发生了，因为点击一个提交按钮有着“提交表单”的特殊含义。
blur 与focus
focus事件在元素获得焦点时触发，例如用户点击它或者按tab键切换到它时。blur事件在失去焦点时触发，这两个事件可用在表单域，
链接和window对象上。
这两个事件可当做mouseover和mouseout的可通过键盘操作（keyboard-accessible）的等价物。

不要用onblur或onchange验证表单。
用户经常使用Tab键快速浏览表单，所以你可能会考试使用blur事件来进行表单验证（一旦用户填完这个格子马上验证，也就是一个表单域失去焦点时去验证该表单域)
千万不要这么做，它及其烦人,用户忙于填写表单的时候通常不愿意被打断。
你可以使用change事件来代替它（当用户改变了表单域的内容时验证）他不像用blur那么烦人，因为当用户
没有像表单域中输入任何东西的时候他不会触发。演示:onchange:

http://www.w3school.com.cn/tiy/t.asp?f=hdom_onchange (onchange在改变文本后，失去焦点会触发这个事件,如果不改变文本，不会触发这个事件）
尽管如此，我还是建议你在所有表单验证脚本中使用onsubmit，那才是用户期望的，首先输入所以的数据，然后在验证所有的数据。

change

The change event fires when the user has changed the value of a form field. On select boxes, the event fires as soon as the user selects anything; on checkboxes and radio buttons, the event fires when the user checks or unchecks them. On text fields, the event fires when the field loses the focus after the user has changed its content.

The change event is not available on HTML elements other than form fields.只能用在form中。

The change event's behavior on select boxes can have accessibility consequences. When you use the arrow keys to go through a list of options, the change event will fire for every option you encounter, even though it should only fire when you've reached the option of your choice.

Therefore it's best to use a separate Go button next to the select box. The user selects an option by mouse or by keyboard, and then uses this button to activate that option.

contextmenu

The contextmenu eventoriginally a Microsoft invention but currently supported by most browsersfires when the user calls up the context menu, usually by right-clicking on the page. This event is typically used to disable the context menu so that users cannot choose the View Source command.

当用户触发上下文菜单，通常就是在页面点击右键时触发，这个事件常被用于禁用上下文菜单以阻止用户选择“查看源代码”指令。

即用户屏蔽右键菜单。

document.oncontextmenu=function()
{
    return false;
}

上面的代码禁用右键。

The return value of an event-handling function serves to allow or disallow the default action. If the function returns false, then the default action is cancelled. Any other return value will cause the default action to take place.

Take this simple example:

var x = document.getElementsByTagName('a');
for (var i=0;i<x.length;i++) {
    x[i].onclick = askConfirmation;
}

function askConfirmation() {
    return confirm('Are you sure you want to follow this link?');
}

We define an onclick event handler for all links in the document. The default action of a click event on a link is loading the page defined in the href property of the link.

However, before that happens, the click event takes place, askConfirmation() runs, and a confirm box (see 6E) is shown. The user can click OK (true) or Cancel (false). This boolean value is returned to the event handler by askConfirmation(), and it indicates whether the default action should take place (true) or not (false).

在正确注册的前提下，事件处理程序可以变成注册目标对象的方法。return false 只有在它所在的函数被直接赋值作为一个
hmtl元素的方法才有效。
return false在下面的情况是有效的。
var x = document.getElementsByTagName('a');
for (var i=0;i<x.length;i++) {
    x[i].onclick = askConfirmation;
}

然而这样是无效的。
var x = document.getElementsByTagName('a');
for (var i=0;i<x.length;i++) {
x[i].onclick=function(){
askConfirmation();
}
}
此时该链接的onclick方法调用askConfirmation（），而尽管该函数依然返回
true或false，但是这个返回值没有被捕获，而是消失的无影无踪了。

return false在下面的事件处理程序是有效的：

x.onclick = askConfirmation;
x.addEventListener('click', askConfirmation,false);
x.attachEvent('onclick', askConfirmation);

It does not work in the following cases:

<element onclick="askConfirmation()">

x.onclick = function () {
    askConfirmation();
}
x.addEventListener('click', function () {
    askConfirmation();
},false);

An extra return statement will suffice to get these last examples in line:

<element onclick="return askConfirmation()">
x.onclick = function () {
    return askConfirmation();
}
x.addEventListener('click', function () {
    return askConfirmation();
},false);

Event-handler registration 内联事件注册

Inline event handlers

The oldest way of registering event handlers is by adding an attribute to an HTML element:

<a href="somewhere.html" onclick="highlightNavItem()">

The traditional model

<a href="somewhere.html" id="somewhere">

var x = document.getElementById('somewhere');
x.onclick = highlightNavItem; // note: no parentheses

注意，函数名后面没有（）；the () operator executes a function, and that's not what we want here. Suppose we did this:

 var x = document.getElementById('somewhere');
 x.onclick = highlightNavItem();

This code gives the command "Execute highlightNavItem() and assign its return value to the onclick property of x."

 

Executing event handlers directly

Anonymous functions

window.onload = function () {
    // initialize
}

Drawbacks of the traditional model

Although the traditional event-handler registration model is easy to use and works in all browsers, you should be aware of its drawbacks. The most important one is that, since you define the value of a method, any subsequent definition overwrites the earlier value.

For instance, in the code below, you first set onclick to the value of doThis, and later you set it to the value of doThat. As a result, only the function doThat() is executed when the user clicks on the element.

 x.onclick = doThis;
 x.onclick = doThat;

If you want to execute both functions when the user clicks on the element, you have to do something like this:

x.onclick = function () {
    doThis();
    doThat();
}

Apart from being a bit kludgy, this syntax also causes the this keyword in doThis() and doThat() to refer to the wrong object,这种做法导致this指向了错误的对象。 because the functions are not methods of the object x.

This problem can become even worse, as Site Survey shows. We already saw that that script needs an onunload event handler on the window and an onclick event handler on the document. But Site Survey may be included in any site, and the host site may already contain an onunload event handler. Therefore I may not do this:省略。

使用更加高级的方法：

W3C and Microsoft models

Both W3C and Microsoft have defined advanced event-handler registration models that effectively solve the overwrite problem. These models allow you to define as many event handlers as you like for the same event on the same element.

Let's repeat our doThis/doThat example in the advanced models. First W3C:

x.addEventListener('click',doThis,false);
x.addEventListener('click',doThat,false);

Now doThis() and doThat() are both executed when the user clicks on element x. addEventListener() means "add an extra event handler on this element in addition to any event handler that may already exist." Note, however, that you cannot be sure they will be executed in this order: the browser may execute doThat() first.

As you see, addEventListener() takes three arguments:

• The event name as a string, without the "on".

• The function to be executed (without parentheses (), of course; we don't want to execute it right now, but only when the event takes place).

• A boolean that states whether the event bubbles up (false) or is captured (true). We'll discuss this in 7D, but for now, know that you nearly always use bubbling, and that the third argument is therefore always false.

  基本上总是用冒泡捕获，所以第3个参数总是false；

The Microsoft model works in a similar way:

x.attachEvent('onclick',doThis);
x.attachEvent('onclick',doThat);

Removing event handlers

Both advanced models contain methods for removing event handlers. Let's look at removeEventListener() and detachEvent():

x.removeEventListener('click',doThis,false); // W3C
x.detachEvent('onclick',doThis); // Microsoft

Disadvantage

The advanced models have one disadvantage: it's impossible to find out which event handlers have been registered on an element. Among other things, that means you can't say "Now remove all onclick event handlers from element x."

In the traditional model, this is possible:

x.onclick = null;

However, the advanced models require you to name the event-handling function you want to remove. If you can't do that because you're not sure which event handlers are currently registered, you can't remove the event handler.

高级模型有一个不足之处：没有办法找出一个元素上已经注册了哪些事件处理程序。
那意味着你不能“从元素x上移除所有的onclick事件处理程序”。
在传统模式中，这是可能的：
x.onclick=null;

然而，高级模型要求你不想提供你想要移除的事件处理函数的名字，如果你因为难以确定当前已注册的事件处理程序而不能给出名字的话，你就不能移除事件处理程序。

我们可以写两个简单的 函数完简化操作：

function addEventSimple(obj,evt,fn) {
   if (obj.addEventListener)
          obj.addEventListener(evt,fn,false);
   else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fn);
}

function removeEventSimple(obj,evt,fn) {
   if (obj.removeEventListener)
          obj.removeEventListener(evt,fn,false);
   else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fn);
}

Cancelling event propagation 取消事件传播

w3c和微软都允许你取消事件捕获和冒泡，在w3c中，你应该调用事件的stopProgagation()方法，而在微软中你需要设置
cancelBubble为true。

var evt=[thhe event object];
if(evt.stopPropagation)
evt.stopPropagation();
evt.cancelBubble=true;

停止事件复制可以阻止事件流中的其他对象的事件处理函数的执行。

<html xmlns="http://www.w3.org/1999/xhtml" onclick="alert('html')">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body onclick="alert('body')">
<input type="button" value="click me" onclick="alert('input')" />
</body>
</html>

会弹出3个alert框，input body html ，这是因为事件先从input冒泡到body，在冒泡到html，如果在按钮出停止事件复制，情况就

变了。

 
<html xmlns="http://www.w3.org/1999/xhtml" onclick="alert('html')">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function handleClick(oEvent)
{
    alert('input');
    if(oEvent.cancelBubble){
        oEvent.cancelBubble=true;
    }
    else{
        oEvent.stopPropagation();
    }
}
</script>
</head>

<body onclick="alert('body')">
<input type="button" value="click me" onclick="handleClick(event)" />
</body>
</html>

点击按钮后，只有input框，注意,<input>元素将event对象作为参数传送给了handleClick（）函数，一旦发生事件，就会创建event对象，且这时是一个全局变量。