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>
例子：將內(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溉仑，兼容性好點
d7abf29a81fca9008f98f4204b8bc33c.png - offsetX距離元素左邊框 IE的x相當于此值
- clientX距離瀏覽器可視區(qū)域 其他瀏覽器的x相當于此值
-
screenX距離屏幕左側(cè)
e7adf76b5303aca498ef2794f26f7c92.png
6 事件類型
焦點事件：
1） focus 元素獲得焦點（不會冒泡）
2 ） 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ā)
