js 事件
事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级上传播到较为不具体的节点（文档）。所有浏览器都支持,但IE如下:
<html>
<head>
<title>lin3615</title>
</head>
<body>
<div id="myDiv">click me</div>
</body>
</html>
如果点击了页面的 div 元素，则传播顺序为
div -> body -> html -> document
document 4 ↖
element html 3 ↖
element body 2 ↖
element div 1 ↖
firefox 等则用的是事件流叫事件捕获,其思想是从不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。如上面代码， div 元素被点击了，则生顺序如下
document -> html -> body ->div
document ↘
html ↘
body ↘
div ↘
DOM事件流，（IE不支持）
事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件。最后才是冒泡阶段。
1↘ document 7↖
2↘ html 6↖
3↘ body 5↖
div 4↖
事件处理程序（或事件侦听器）
事件就是用户或浏览器自身执行的某种动作，诸如 click,load 和 mouseove,都是事件的名字。而响应事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字是以 "on"开头，因此， click 事件的事件处理程序就是 onclick,load 事件的处理程序就是 onload.为事件指定处理程序的方式有几种，如下
HTML事件处理程序：
<input type="button" value="click me" onclick="alert('lin3615')" />
DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick=function()
{
alert("lin3615");
}
DOM2级事件处理程序(少用为好)
定义了两个方法，用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener(),它们都接受三个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值，和一个布尔值。最后一个值如果是 true,表示在捕获阶段调用事件处理程序。如果是 false，表示在冒泡阶段调用事件处理程序.
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
可以添加多个事件：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("hi,lin3615");
}, false);
通过 addEventListener()添加的事件，只能用 removeEventListener()来先移除。上面是通过匿名函数加入的，所以无法销除。
只有如下的方式才能销除
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
IE事件处理程序
有两个类似的方法: attachEvent() 和 detachEvent();这两个方法接受参数相同：事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡，所以通过 attachEvent添加的事件处理程序都会被添加到冒泡阶段。
var btn = document.getElementById("myDiv");
btn.attachEvent("onclick", function(){
alert("hi");
});
此时的事件程序名称为 onclick
同样可以添加多个事件处理程序
var btn = document.getElementById("myDiv");
btn.attachEvent("onclick", function(){
alert("hi")
});
btn.attacheEvent("onclick", function(){
alert("lin3615");
});
detachEvent()移除相应的事件处理程序
var btn = document.getElementById("myBtn");
var handler = function(){
alert("lin3615");
};
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);
==============
跨浏览器事件处理程序
var btn = document.getElementById("myDiv");
var handler = function(){
alert("lin3615");
};
var EventUtil = {
addHandler: function(element, type, handler)
{
if(element.addEventListener)
{
element.addEventListener(type, handler, false);
}else if(element.attachEvent)
{
element.attachEvent
('on'+type, handler);
}else
{
element["on"+type] =
handler;
}
},
removeHandler: function(element, type,
handler)
{
if
(element.removeEventListener)
{
element.removeEventListener(type, handler, false);
}else if(element.detachEvent)
{
element.detachEvent("on"+type, handler);
}else
{
element
["on"+type] = null;
}
}
};
// 添加事件
EventUtil.addHandler(btn, "click", handler);
// 移除事件
EventUtil.removeHandler(btn, "click", handler);
==============
事件类型
鼠标事件：lick,dblclick,mousedown,mouseout,mouseover,mousemove,mouseup
键盘事件
keydown, keypress, keyup
html 事件:load/unload/abort/error/select/change/submit/reset/resize/scr
oll/focus/blur