本節(jié)主要內(nèi)容：
學(xué)習(xí)目標(biāo)：
節(jié)數(shù)知識(shí)點(diǎn)要求
第一節(jié) event對(duì)象關(guān)于event對(duì)象了解
event對(duì)象的使用了解
第二節(jié) event中常用的屬性和方法event中常用屬性了解
event中常用的方法了解
第三節(jié) ie中常用的屬性和方法ie瀏覽器常用的屬性和方法掌握
第四節(jié) 鼠標(biāo)滾輪事件鼠標(biāo)滾輪事件掌握
第五節(jié) 文檔事件文檔事件掌握
第六節(jié) 事件委托事件委托掌握
一、event對(duì)象
1.1關(guān)于event對(duì)象
概念： Event 對(duì)象代表事件的狀態(tài)，當(dāng)dom tree中某個(gè)事件被觸發(fā)的時(shí)候，會(huì)同時(shí)自動(dòng)產(chǎn)生一個(gè)用來描述事件所有的相關(guān)信息（比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。）的對(duì)象，這個(gè)對(duì)象就是event（事件對(duì)象）。
1.2 Event事件對(duì)象的使用
1.2.1直接通過event來獲取
1.2.2 通過函數(shù)傳參數(shù)的形式? 還可以通過函數(shù)傳參數(shù)的形式來使用，一般而言我們使用【形參e或event】來代替。
1.document.querySelector("#d1").onclick = function(e){
? ? console.log(e);
}; 2.document.querySelector("#d1").onmousemove = function(eve){
? ? console.log(eve);
}
3.document.querySelector("#d1").onkeyup = function(){
? ? console.log(event);
};
因?yàn)閑vent對(duì)象是用來描述【發(fā)生的事件的信息】的，而event對(duì)象當(dāng)中所提供的一系列屬性和方法正是用來獲取這些信息的途徑。
二．event中常用的屬性和方法
2.1 event中常用的屬性
因?yàn)閑vent對(duì)象是用來描述【發(fā)生的事件的信息】的，而event對(duì)象當(dāng)中所提供的一系列屬性和方法正是用來獲取這些信息的途徑。
2.1.1 type 屬性
type屬性用來獲得【當(dāng)前觸發(fā)事件】的類型，此屬性只讀。
document.getElementById(“d1”).onclick = function () {? ? ? ? ? console.log(event); console.log(event.type); //依賴于事件的觸發(fā)而存在，只讀屬性? ? };
2.1.2 bubbles屬性
bubbles屬性用來獲得【當(dāng)前觸發(fā)事件的類型】是否冒泡，如果當(dāng)前事件類型支持冒泡則返回true，否則返回false。
? ? 必須注意的是：bubbles屬性指的是該事件是否冒泡。和事件處理機(jī)制無關(guān)?。。?！
? ? document.getElementById(“d1”).onclick = function () {?? ? ? ? ? console.log(event.bubbles);?? ? };
? ? document.getElementById(“d1”).addEventListener('mouseenter',function (e) {?? ? ? ? ? console.log(e.bubbles);?? ? });
? ? 因?yàn)槭髽?biāo)【點(diǎn)擊事件】這個(gè)事件本身支持冒泡。
? ? 因此當(dāng)存在點(diǎn)擊事件被觸發(fā)后，event對(duì)象的bubbles屬性返回的就是true，表示當(dāng)前事件支持冒泡。
2.1.3 eventPhase 屬性
eventPhase：事件傳導(dǎo)至【當(dāng)前節(jié)點(diǎn)】時(shí)處于什么的狀態(tài)。
? ? ? ? 1：事件處于捕獲狀態(tài)
? ? ? ? 2：事件處于真正的觸發(fā)者
? ? ? ? 3：事件處于冒泡狀態(tài)
? ? d1.onclick = function (e) {console.log(this, e.eventPhase);};?? ? d2.onclick = function (e) {console.log(this, e.eventPhase);};?? ? document.onclick = function (e) {console.log(this, e.eventPhase);};
? ? d1.addEventListener('click', function (e) {console.log(this, e.eventPhase)}, true);?? ? d2.addEventListener('click', function (e) {console.log(this, e.eventPhase)}, true);?? ? document.addEventListener('click', function (e) {console.log(this, e.eventPhase)}, true);
2.1.4 target 屬性和 currentTarget 屬性
? ? target：返回事件真正的觸發(fā)者
? ? currentTarget：返回事件的監(jiān)聽者(觸發(fā)的事件綁定到了哪個(gè)節(jié)點(diǎn)，就返回誰)
? ? document.getElementById("d1").onclick = function (e) {?? ? ? ? console.log(e.target);?? ? ? ? console.log(e.currentTarget);?? ? };
2.1.5 button屬性
button 返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。
event.button=0|1|2
參數(shù)? 描述
0? 指定鼠標(biāo)左鍵。
1? 指定鼠標(biāo)中鍵。
2? 指定鼠標(biāo)右鍵。
注意： Internet Explorer 8 及更早IE版本有不同的參數(shù)：
參數(shù)? 描述
1? 指定鼠標(biāo)左鍵。 (IE8及更早IE版本)
4? 指定鼠標(biāo)中鍵。 (IE8及更早IE版本)
2? 指定鼠標(biāo)右鍵。
2.16 key和keyCode屬性
key是哪個(gè)鍵
keyCode返回keydown何keyup事件發(fā)生的時(shí)候按鍵的代碼，以及keypress 事件的Unicode字符(ASCII碼值)；(firefox2不支持 event.keycode，可以用 event.which替代 )
2.1.7獲取當(dāng)前坐標(biāo)的屬性
clientX得到當(dāng)前屏幕可視區(qū)域x坐標(biāo)的值(不包含滾動(dòng)條)
clientY得到當(dāng)前屏幕可視區(qū)域y坐標(biāo)的值(不包含滾動(dòng)條)
screenX得到當(dāng)前屏幕x坐標(biāo)的值
screenY得到當(dāng)前屏幕y坐標(biāo)的值
pageX得到當(dāng)前屏幕可視區(qū)域x坐標(biāo)的值(包含滾動(dòng)條)
pageY得到當(dāng)前屏幕可視區(qū)域y坐標(biāo)的值(包含滾動(dòng)條)
2.2 event中常用的方法
stopPropgation()：阻止冒泡。
preventDefault()：默認(rèn)阻止。
三、IE中的event對(duì)象的常用屬性和方法
3.1 IE中的event對(duì)象的常用屬性和方法
srcElement （target）屬性：返回的是目標(biāo)對(duì)象
cancelBubble 屬性:取消冒泡
returnValue屬性：默認(rèn)阻止
3.3 兼容性問題
通過對(duì)IE下event的方法和非IE的方法的介紹，能夠感覺到兩種情況的很多屬性和方法大致都相同，只不過會(huì)在某些特殊方法上面存在不同的兼容性寫法。因此我們可以提出一些同時(shí)滿足不同瀏覽器兼容性的寫法。
屬性的兼容性寫法我們已經(jīng)說過：
? ? ? ? var target = eve.target || eve.srcElement;
? ? ? ? var eve = eve || window.event?
方法的兼容性寫法我們也可以仿照這個(gè)來進(jìn)行編寫。思路如下：
(1)因?yàn)閮煞N情況下的event對(duì)象獲取方式并不同，所以希望能夠自定義一個(gè)對(duì)象來替代event對(duì)象的使用。
(2)因?yàn)橄胍远x對(duì)象在功能上和系統(tǒng)event對(duì)象的方法相同，所以需要給自定義對(duì)象添加方法
參考代碼:
var Event = {
? ? stop:function () {?? ? ? if(event.stopPropagation){?? ? ? ? ? ? ? event.stopPropagation();?? ? ? }else {?? ? ? ? ? ? ? event.cancelBubble = true;?? ? ? ? ? ? }?? ? ? },?? ? quxiao:function () {?? ? ? ? if(event.preventDefault){?? ? ? ? ? ? event.preventDefault();?? ? ? ? }else {?? ? ? ? ? ? event.returnValue = false;?? ? ? ? }?? ? } };
四、鼠標(biāo)滾輪事件
滾輪就是鼠標(biāo)上的滾輪，它滾動(dòng)的時(shí)候觸發(fā)事件
4.1滾輪事件
onmousewheel就是鼠標(biāo)滾動(dòng)事件，mouse鼠標(biāo)，wheel就是輪子。
event參數(shù)最最重要的事就event.wheelDelta屬性，表示滾動(dòng)的方向。這是瀏覽器的規(guī)定：
鼠標(biāo)往上滾， 120
鼠標(biāo)往下滾， -120
4.2火狐瀏覽器滾輪事件
火狐瀏覽器不兼容，火狐使用自己的專用事件DOMMouseScroll ，并且這個(gè)事件只能通過標(biāo)準(zhǔn)的DOM2級(jí)的事件綁定方式添加。
火狐添加的事件，是它自己的專門事件DOMMouseScroll，
表示滾動(dòng)方向的事件的屬性叫做event.detail。
detail就是細(xì)節(jié)的意思。反著的，滾動(dòng)方向往上，-3；滾動(dòng)方向往下，3。
4.3 封裝瀏覽器兼容性
五、文檔事件
(1)? 加載成功\失敗事件：load\error
load事件指的是：節(jié)點(diǎn)加載成功時(shí)自動(dòng)發(fā)生回調(diào)事件
error事件值得是：節(jié)點(diǎn)加載失敗時(shí)自動(dòng)發(fā)生的回調(diào)事件
(2)? 當(dāng)DOM加載完成時(shí)觸發(fā)事件：DOMContentLoaded
DOMContentLoaded事件和load事件的區(qū)別是觸發(fā)的時(shí)機(jī)不一樣，先觸發(fā)DOMContentLoaded事件，后觸發(fā)load事件。
DOM文檔加載的步驟為:? ? ? ? 解析HTML結(jié)構(gòu)。? ? ? ? 加載外部腳本和樣式表文件。? ? ? ? 解析并執(zhí)行腳本代碼。? ? ? ? DOM樹構(gòu)建完成。? //DOMContentLoaded執(zhí)行? ? ? ? 加載圖片等外部文件。? ? ? ? 頁(yè)面加載完畢。 //load執(zhí)行
(3)? 文檔加載狀態(tài)判斷事件：readystatechange
眾所周知，document節(jié)點(diǎn)中擁有一個(gè)屬性叫做readyState。其擁有三個(gè)可能值：
? ? loading：加載DOM中
? ? interactive：加載外部資源
? ? complete：加載完成
? ? 而readystatechange事件正是在這個(gè)狀態(tài)發(fā)生改變時(shí)調(diào)用的事件。
六、Event案例
6.1 二級(jí)聯(lián)動(dòng)
6.2 三級(jí)聯(lián)動(dòng)
6.3 放大鏡案例
七、事件委托
7.1 什么是事件委托
事件委托/事件代理：事件委托就是利用【事件冒泡】，自己本身做不了這個(gè)事，讓讓上一級(jí)來做這個(gè)事，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。
