一、事件流
1.含義：事件流描述的是從頁(yè)面中接收事件的順序
2.事件冒泡：是有ie提出的，即事件開(kāi)始時(shí)是由具體的元素接受，然后逐步向上傳播到不具體的元素
3.事件捕獲：是有NC提出的，即事件開(kāi)始是有不具體的元素接受，然后逐步向下傳播到具體的元素上
4.DOM事件流：“DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段

二、事件處理程序
1.HTML事件處理程序
a.在標(biāo)簽中直接定義
<script type="text/javascript">
 ? ?function showMessage(){
 ? ? ? ?alert("Hello world!");
 ? ?}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
b.缺陷
①存在一定的時(shí)差
②這種事件的作用鏈在不同的瀏覽器中會(huì)造成不同的結(jié)果
2.DOM0級(jí)事件處理程序
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
3.跨瀏覽器
var EventUtil = {
// 添加事件監(jiān)聽(tīng)
addEvent : function (element, type, handler) {
if (element.addEventListener)
{
element.addEventListener(type, handler, false);
} else if (element.attachEvent)
{
element.attachEvent("on" + type, handler);
}
},
// 解除事件監(jiān)聽(tīng)
delEvent : function (element, type, handler) {
if (element.removeEventListener)
{
element.removeEventListener(type, handler, false);
} else if (element.detachEvent)
{
element.detachEvent("on" + type, handler);
}
}
}

三、事件對(duì)象
var EventUtil = {
// 獲取event對(duì)象
getEvent : function (event) {
return event ? event : window.event;
},
// 獲取事件源
getTarget : function (event) {
return ?event.target || event.srcElement;
},、
// 阻止默認(rèn)行為
stopDefault : function (event) {
if (event.preventDefault)
{
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止冒泡
stopBubble : function (event) {
if (event.stopPropagation)
{
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}

四、事件類型
1.UI事件，是指那些不一定和用戶操作有關(guān)的事件，如load ?unload ?DOMActivate ?error等
①判斷瀏覽器是否支持DOM2 HTML事件和DOM3UI事件
var isSupported = document.implementation.hasFeature("UIEvent", "3.0");
②load事件，當(dāng)頁(yè)面加載完成后（img js css）觸發(fā)的事件
a.加載img
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
b.加載JS
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
c.加載CSS
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
②Unload事件，當(dāng)從一個(gè)頁(yè)面切換到另一個(gè)頁(yè)面，就會(huì)被調(diào)用，常常用于清除引用，避免內(nèi)存泄露
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
③Resize事件，當(dāng)窗口大小發(fā)生改變時(shí)觸發(fā)的事件
EventUtil.addHandler(window, "resize", function(event){
alert("size changed");
});
④Scroll事件，表示頁(yè)面元素的變化，會(huì)在文檔被滾動(dòng)的時(shí)候觸發(fā)。
EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
2.焦點(diǎn)事件，主要為Blur()和focus()方法
①判斷瀏覽器是否支持焦點(diǎn)事件
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
②獲焦與失焦
EventUtil.addHandler(txt, "focus", function(event){
alert("focus");
});
EventUtil.addHandler(txt, "blur", function(event){
alert("blur");
});
3.鼠標(biāo)與滾輪事件
①判斷瀏覽器是否支持鼠標(biāo)事件
var isSupported = document.implementation.hasFeature("MouseEvents", "3.0");
②客戶區(qū)坐標(biāo)位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.clientX + "," + event.clientY);
});
③頁(yè)面坐標(biāo)位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX,
pageY = event.pageY;
if (pageX === undefined){
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
if (pageY === undefined){
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
alert("Page coordinates: " + pageX + "," + pageY);
});
④屏幕坐標(biāo)位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
⑤修改鍵
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
⑥相關(guān)元素。例如，將鼠標(biāo)的光標(biāo)放在一個(gè)div上，那么當(dāng)他觸發(fā)事件mouseout時(shí)，它的主元素時(shí)div，而相關(guān)元素則是body；當(dāng)他觸發(fā)的事件為mouseover時(shí)，它的主目標(biāo)是body，而相關(guān)元素時(shí)div。
var EventUtil = {
getRelatedTarget : function (event) {
if (event.relatedTarget)
{
return event.relatedTarget;
} else if (event.toElement)
{
return event.toElement;
} else if (event.fromElement)
{
return event.fromElement;
} else {
return null;
}
}
}
⑦鼠標(biāo)按鈕
var EventUtil = {
getButton : function (event) {
if (document.implementation.hasFeature("MouseEvents", "2.0"))
{
return event.button;
} else {
switch (event.button)
{
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
}
⑧滾輪事件
var EventUtil = {
getWheelDelta : function (event) {
if (event.wheelDelta)
{ ? // opera 9.5以下
return (client.engine.opera && client.engine.opera < 9.5) ?
- event.wheelDelta : event.wheelDelta;
} else {
// 火狐
return - event.detail * 40;
}
}
}
4.鍵盤(pán)與文本事件 ? keydown ? keyup ?keypress 和textInput事件
①鍵碼，就是按鍵的碼號(hào)。用keyCode表示
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
event = EventUtil.getEvent(event);
alert(event.keyCode);
});
②字符編碼
var EventUtil = {
getCharCode : function (event) {
if (typeof event.charCode == "number")
{
return event.charCode;
} else {
return event.keyCode;
}
},
}
③DOM3中添加了一個(gè)textInput事件，它不同于keyPress中的textInput事件，它有一個(gè)data屬性，用于專門(mén)識(shí)別字符。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
5.事件變動(dòng)，在DOM結(jié)構(gòu)樹(shù)發(fā)生變化時(shí)，會(huì)觸發(fā)一系列的事件
eg: <body>
<ul id="myList">
 ? ?<li>Item 1</li>
 ? ?<li>Item 2</li>
 ? ?<li>Item 3</li>
</ul>
</body>
①刪除節(jié)點(diǎn)
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", function(event){
alert(event.type);
alert(event.target);
});
list.parentNode.removeChild(list);
});
③插入節(jié)點(diǎn)
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
var item = document.createElement("li");
item.appendChild(document.createTextNode("Item 4"));
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeInserted", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
alert(event.type);
alert(event.target);
});
list.appendChild(item);
});
6.html5事件
①ContextMenu事件，用于何時(shí)應(yīng)該顯示上下文菜單，以供開(kāi)發(fā)人員自定義菜單
<body>
<div id="myDiv">Right click or Ctrl+click me to get a custom context menu.
 ? ?Click anywhere else to get the default context menu.</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
 ? ? ? ? ? ? ? ?silver">
 ? ?<li><a >Nicholas’site</a></li>
 ? ?<li><a >Wrox site</a></li>
 ? ?<li><a 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";
});
});
②Beforeunload事件，在頁(yè)面卸載之前調(diào)用的事件，其中的event.returnValue表示請(qǐng)求留下的語(yǔ)句
EventUtil.addHandler(window, "beforeunload", function(event){
event = EventUtil.getEvent(event);
var message = "I'm really going to miss you if you go.";
event.returnValue = message;
return message;
});
③DOMContentLoaded事件表示DOM被加載完后觸發(fā)
④Pageshow和pagehide事件
當(dāng)頁(yè)面再次load一個(gè)page時(shí)，頁(yè)面會(huì)從緩存bfcache中調(diào)用內(nèi)容中的數(shù)據(jù)、js文件等，這是會(huì)觸發(fā)一個(gè)pageshow的事件。該事件的目標(biāo)元素隨時(shí)document，但是要添加到window中去。在單擊瀏覽器的前進(jìn)和后退的按鈕時(shí)，可以被調(diào)用，此現(xiàn)象被稱為往返緩存。
(function(){
var showCount = 0;
EventUtil.addHandler(window, "load", function(){
alert("Load fired");
});
EventUtil.addHandler(window, "pageshow", function(){
showCount++;
alert("Show has been fired " + showCount +
" times. Persisted? " + event.persisted);
});
})();

五、內(nèi)存和性能
1.事件委托，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件
eg: <ul id="myLinks">
 ? ?<li id="goSomewhere">Go somewhere</li>
 ? ?<li id="doSomething">Do something</li>
 ? ?<li id="sayHi">Say hi</li>
</ul>
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.sayHi":
alert("hi");
break;
}
});

2.移除事件處理程序 ? 當(dāng)某些特定的事件處理程序沒(méi)有必要存在的時(shí)候，我們可以解除它的綁定事件函數(shù)。
<div id="myDiv">
 ? ?<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
 ? ?var btn = document.getElementById("myBtn");
 ? ?btn.onclick = function(){
 ? ? ? ?//先執(zhí)行某些操作
 ? ? ? ?btn.onclick = null; //移除事件處理程序
 ? ? ? ?document.getElementById("myDiv").innerHTML = "Processing...";
 ? ?};
</script>

六、模擬事件，即通過(guò)javascript來(lái)觸發(fā)事件，而不是通過(guò)用戶點(diǎn)擊操作瀏覽器觸發(fā)
①步驟
a.document.createEvent(字符串),創(chuàng)建并返回一個(gè)event對(duì)象
b.在創(chuàng)建并返回event對(duì)象后，要為其函數(shù)進(jìn)行初始操作
c.觸發(fā)事件，用btn.dispatchEvent(event);
②模擬單擊按鈕事件
// DOM中
var btn = document.getElementById("myBtn");
//創(chuàng)建事件對(duì)象
var event = document.createEvent("MouseEvents");
//初始化事件對(duì)象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
//觸發(fā)事件
btn.dispatchEvent(event);
// Less IE8中
ar btn = document.getElementById("myBtn");
//創(chuàng)建事件對(duì)象
var event = document.createEventObject();
//初始化事件對(duì)象
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//觸發(fā)事件
btn.fireEvent("onclick", event);