js事件流觸發原理
DOM2.0模型將事件處理流程分為三個階段：一、事件捕獲階段，二、事件目標階段，三、事件起泡階段
原理圖
事件捕獲階段： 當某個元素觸發某個事件（如onclick事件），頂層對象就會發出一個事件流，隨DOM樹的根節點向目標節點流去，直到到達事件真正發生的目標元素身上。在這個過程中，各個dom上綁定的事件不會被觸發。
事件目標階段： 當事件流到達目標元素的時候，如果目標元素綁定的有事件，則執行，如果沒有，將進行事件起泡階段。
事件起跑階段： 事件流原路返回，從目標元素開始，向DOM樹 根節點流動，途中如果遇到有節點綁定了相應的事件處理函數，這些函數就會被觸發。這樣，整個事件的觸發便形成一個閉環。
關于事件委托
根據事件流原理，我們知道當點擊一個元素之后，全局會獲得一個event.target對象（注意，是全局對象,IE 下是window.event.srcElement），及目標對象，因為這個event.target變量是全局的，因此，我們可以通過這個對象，在事件冒泡階段將其傳遞給父親或者更高級節點，委托處理。
一個簡單的例子：
<div id="uu">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<div>
//這里我們綁定在了父節點的事件上
document.getElementById('uu').onclick = function(e) {
var e = e || window.event;
var target = e.target || e.srcElemnt;
console.log(target)
if (target.nodeName.toLowerCase() === 'li') {
console.log(target.innerHTML)
}
}
// 我們還可以綁定在他太爺爺節點上， 反正event.target 都是一樣的
document.onclick =function(e){
var e = e || window.event;
var target = e.target || e.srcElemnt;
console.log(target)
if (target.nodeName.toLowerCase() === 'li') {
console.log(target.innerHTML)
}
}
由于是同一個全局變量event.target 所以得到的輸出結果一樣
js阻止冒泡
由于事件流的機制，在捕獲了事件目標之后，事件流往回走，會執行經過的dom節點上綁定的事件。在很多情況下，我們不想讓綁定在父節點事件執行，這時我們就需要阻止冒泡事件的發生。
同一個例子
document.getElementById('uu').onclick = function(e) {
var e = e || window.event;
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否則，我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
var target = e.target || e.srcElemnt;
console.log(target)
if (target.nodeName.toLowerCase() === 'li') {
console.log(target.innerHTML)
}
}
document.onclick =function(e){
var e = e || window.event;
var target = e.target || e.srcElemnt;
console.log(target)
if (target.nodeName.toLowerCase() === 'li') {
console.log(target.innerHTML)
}
}
此時再次進行點擊ul內的元素，ul上綁定的方法會執行，document.onclick方法將不會被執行，冒泡階段被中斷。
事件綁定的兼容
HTML5工作組寫法
var addEvent = (function() {
if (document.addEventListener) {
return function(el, type, fn) {
if (el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
} else {
el.addEventListener(type, fn, false);
}
};
} else {
return function(el, type, fn) {
if (el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
} else {
el.attachEvent('on' + type,
function() {
return fn.call(el, window.event);
});
}
};
}
})();
