1.當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級，一直到window书释。當某個dom上的事件被觸發(fā)，那么其父級元素的該事件也會被逐級觸發(fā)。
例子1：
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){console.log(‘我是內(nèi)層div’);};
div1.onclick = function(){console.log(‘我是外層div’);};
<div id="div1">
<div id="div2"></div>
</div>
例子2：去掉例1內(nèi)層div的綁定事件
例子3：將內(nèi)層div通過絕對定位放置于div3內(nèi)
事件冒泡的原理圖：
以上類似一個dom片段
<body>
<div>
<div>
<div class=”content”>666</div>
</div>
</div>
</body>
每個dom對象都是嵌套的圣猎，形成一個金字塔形結(jié)構(gòu)，且每個對象都有諸如onclick屬性
根據(jù)瀏覽器廠商自定規(guī)則乞而，當事件觸發(fā)時會(比如onclick)收集個層級對象上的onclick函數(shù)體與參數(shù)形成一個數(shù)組
[{fn:function(){},org},{fn:function(){},org},null,{fn:function(){},org},null,null]
我們假設(shè)它叫eventArr
然后遍歷eventArr數(shù)組按順序調(diào)用
這就是所謂的事件冒泡送悔，據(jù)上可知，并不會將dom節(jié)點上的事件函數(shù)‘傳遞’給父級元素爪模，只是會按順序調(diào)用父級對應(yīng)的事件函數(shù)欠啤，如果未綁定，那么就會略過
2事件捕獲：
將例子1中的事件綁定方式變?yōu)?/p>
dom.addEventListener('click',function(){
console.log('我是內(nèi)層div')
},true);
注意第三個參數(shù)必須為true
可見其執(zhí)行順序就是從外到內(nèi) 相當于按eventArr的正序執(zhí)行個事件函數(shù)屋灌，而事件冒泡是將eventArr倒敘排列后再執(zhí)行
3 DOM****事件流：
事件捕獲階段洁段、處于目標階段、事件冒泡階段
事件捕獲從外到內(nèi)收集事件函數(shù)形成eventArr 然后執(zhí)行
將eventArr倒敘排列后 執(zhí)行共郭，第一個元素的執(zhí)行即為處于目標階段祠丝，之后的執(zhí)行過程叫事件冒泡，那么我們使用dom.onclick時如何實現(xiàn)事件捕獲呢除嘹？
4 事件等級：
DOM0級事件時 微軟（IE）按事件冒泡處理 網(wǎng)景（Netscape）按事件捕獲
DOM1級 只存在于理論上
DOM2級 dom.addEventListener('click',function(){//使用事件監(jiān)聽器進行事件綁定
console.log('我是內(nèi)層div')
},true);//第三個參數(shù)默認false（冒泡）傳true的話（捕獲）
DOM2級事件與DOM0事件的不同點
前者靠事件監(jiān)聽器綁定事件写半，可多次綁定同一類型事件
后者直接綁定，多次綁定會覆蓋
dom.addEventListener函數(shù)的第一個參數(shù)為事件名（注意不加on）尉咕，第二個參數(shù)為事件函數(shù)叠蝇，第三個參數(shù)為冒泡與否
移除事件時后者置空，前者使用removeEventListener(type,fn,boolean)boolean必須與綁定時一致
IE瀏覽器的事件監(jiān)聽器attachEvent(‘onclick’,fn)移除事件時采用detachEvent(‘onclick’,fn)
那么一個跨瀏覽器的事件綁定移除函數(shù)應(yīng)該這樣書寫
addEvent(elment,type,fn){
if(elment.addEventListener){
}else if(elment.attachEvent){
}else{
}
}
removeEvent(element,type,fn){
if(elment.removeEventListener){
}else if(elment.detachEvent){
}else{
}
}
5事件對象：
兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中龙考。無論指定事件處理程序時使用DOM0級或是DOM2級蟆肆，都會傳入event對象矾睦。event對象包含一些特定的屬性和方法，方便我們調(diào)用
target始終指向觸發(fā)事件的dom節(jié)點
currentTarget指向事件函數(shù)綁定的dom節(jié)點
在事件處理程序內(nèi)部炎功，對象this始終等于currentTarget的值枚冗，而target則只包含事件觸發(fā)實際目標。如果直接將事件處理程序指定給了目標元素，則this、currentTarget仗谆、和target包含相同的值蒲列。
IE的事件對象：window.event;
其他的：event
目標dom IE:event.srcElement; 其他:event.target
target屬性 觸發(fā)事件的dom對象
srcElement屬性 對于生成事件的 Window 對象胳泉、Document 對象或 Element 對象的引用
clientX屬性 返回當事件被觸發(fā)時，鼠標指針的水平坐標
clientY屬性 返回當事件被觸發(fā)時，鼠標指針的垂直坐標
pageX屬性 與clientX同值
pageY屬性 與clientY同值
建議使用client，兼容性好點
offsetX距離元素左邊框 IE的x相當于此值
clientX距離瀏覽器可視區(qū)域 其他瀏覽器的x相當于此值
screenX距離屏幕左側(cè)
6 事件類型
焦點事件：focus 元素獲得焦點（不會冒泡）
blur 元素失去焦點（不會冒泡）
鼠標與滑輪事件：
mouseenter 指針移到有事件監(jiān)聽的元素內(nèi)
mouseover 該事件冒泡
mousemove 指針在元素內(nèi)移動時持續(xù)觸發(fā)
mousedown 在元素上按下任意鼠標按鈕
mouseup 在元素上釋放任意鼠標按鍵
click 在元素上按下并釋放任意鼠標按鍵
dblclick 在元素上雙擊鼠標按鈕
contextmenu 右鍵點擊 (右鍵菜單顯示前).
mousewheel 滾輪向任意方向滾動
IE稚疹、chrome監(jiān)聽的是wheelDelta,向下滾動其值為-120； 向上滾動其值為120
wheel FF監(jiān)聽的是detail,向下滾動其值為3祭务；向上滾動其值 為-3
mouseleave 指針移出元素范圍外（不冒泡）
mouseout 指針移出元素内狗，或者移到它的子元素上
鼠標按鍵事件會返回button值
0 規(guī)定鼠標左鍵
1 規(guī)定鼠標中鍵
2 規(guī)定鼠標右鍵
鍵盤事件
鍵盤事件包括keydown(按下鍵盤時觸發(fā)該事件)，keypress(只要按下的鍵并非Ctrl, Alt, Shift义锥，就接著觸發(fā)keypress事件), keyup(松開鍵盤時觸發(fā)該事件)
altKey柳沙，ctrlKey，shiftKey: 返回一個布爾值拌倍，表示是否按下對應(yīng)的鍵
key: 返回一個字符串赂鲤，表示按下的鍵名。如果同時按下一個控制鍵和一個符號鍵柱恤，則返回符號鍵的鍵名
keyCode: 返回按鍵的 ASCII 碼数初，注意: 這里是不區(qū)分大小寫的
文本事件
input 文本框輸入字符時觸發(fā)
change 文本框內(nèi)容改變時觸發(fā)
