事件流
事件流：頁面中接收事件的順序；
IE的事件流是冒泡流，其他的瀏覽器是捕獲流，如下圖；
DOM事件流
DOM 事件流同時支持這兩種事件流，並且規定DOM任何事件流都包含三個階段：事件捕獲階段、處於目標階段、事件冒泡階段；
注冊事件
之前注冊事件的方法或多或少都會存在一些問題，現在通常是使用AddEventlistener()來注冊事件/監聽事件，與之對應的還有removeEventListener()來刪除事件;
所有DOM節點都有這兩個方法，並且他們都是接收3個參數（事件類型，事件處理，boolean）,第三個參數如果是在冒泡階段處理是false,反之true；
建議將事件處理程序添加到事件冒泡階段，這樣可以最大限度的兼容各種瀏覽器；
1 var btn=document.getElementById("btn1"); 2 btn.addEventListener("click",function(){alert("hello")},false);
關於事件這里差不多了沒多少東西；
委托事件
一開始我以為js中的委托事件跟.net中的delegate(委托)是一個概念，其實不是這樣，js中的委托事件其實是利用事件冒泡到父節點，通過父節點來監聽事件，在通過事件對象來判斷是那個元素，然后相應的處理；
event 事件對象：在觸發DOM上任何事件都會產生這個event對象，這個對象包含了所有與事件相關的信息（很強大的一個對象具體的可以自己查相關資料）；
委托實例
這里的委托還是挺容易理解的，就是委托別人來幫你做事情，根據我前面說的原理，翻譯從HTML應該是這樣的：本來是該你這個節點上該做的事情，現在委托了父節點來做；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
<script>
window.onload = function(){
var oUl = document.getElementById("ul");
oUl.addEventListener("mouseover",mouseoverDemo,false);
oUl.addEventListener("mouseout",mouseoutDemo,false);
function mouseoverDemo(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement; //兼容IE
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
function mouseoutDemo(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
}
</script>
</html>
委托事件優點
1、相比之前遍歷每一個li在綁定一個事件感覺爽了很多；
2、很明顯沒有了for 性能肯定是有提升；
3、動態的添加新的元素還是會有之前的事件（因為不管怎么樣還是要冒泡到父元素的嘛）；
內容很少都是些基礎；