1、事件的三個(gè)階段
捕獲 目標(biāo) 冒泡
低版本IE(IE8及以下版本)不支持捕獲階段
捕獲事件流:Netscape提出的事件流,即事件由頁面元素接收,主機(jī)箱下,傳播到最具體的元素
冒泡事件流:IE提出的事件流,即事件由最具體的元素接收,逐級(jí)向上,傳播到頁面
2、IE和W3C不同綁定事件解綁事件的方法有什么區(qū)別,參數(shù)是什么,以及事件對(duì)象ev有什么區(qū)別
W3C:target.addEventListener(event,listener,useCapture);
event——事件類型;
listener——事件觸發(fā)時(shí)執(zhí)行的函數(shù);
useCapture——指定時(shí)間是否再補(bǔ)貨或冒泡階段執(zhí)行,為true時(shí)事件句柄在捕獲階段執(zhí)行,為false(默認(rèn)false)時(shí),事件句柄在冒泡階段執(zhí)行。
例:
btn.addEventListener('click',function(){
//do something...
},false);
對(duì)應(yīng)的事件移除:
removeEventListener(event,function,capture/bubble);
例:
removeEventListener(event,function,capture/bubble);
IE:target.attacEvent(type,listener);
type——字符串,事件名稱,含"on",比如"onclick","onmouseover"等。
listener——實(shí)現(xiàn)了EventListener接口或者是JavrScript中的函數(shù)。
例:
btn.attachEvent('onclick',function(){
//do something...
})
對(duì)應(yīng)的事件移除:
detachEvent(event,function);
目前支持以addEventListener綁定事件的瀏覽器:FF、Chrome、Safari、Opera、IE9-11
目前支持以attachEvent綁定事件的瀏覽器:IE6-10
阻止:
通過stopPropagation()或cancelBubble來阻止事件向下一級(jí)元素傳遞。
cancelBubble是IE標(biāo)準(zhǔn)下阻止事件傳遞的屬性,設(shè)置cancelBubble=true表示阻止冒泡
3、【事件的代理/委托】的原理以及優(yōu)缺點(diǎn)
原理:靠事件的冒泡機(jī)制來實(shí)現(xiàn)的
優(yōu)點(diǎn):
1.可以大量節(jié)省內(nèi)存占用,減少事件注冊(cè),比如在table上代理所有td的click事件就非常棒
2.可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無需再次對(duì)其綁定事件,對(duì)于動(dòng)態(tài)內(nèi)容部分尤為合適
缺點(diǎn):
事件代理的應(yīng)用常用應(yīng)該僅限于上述需求下,如果把所有事件都代理就可能會(huì)出現(xiàn)事件誤判,即本不應(yīng)用觸發(fā)事件的被綁上了事件(有人把頁面里所有的時(shí)間都綁定到document用委托的,只是及其不智的做法)
4、實(shí)現(xiàn)事件代理,要求兼容瀏覽器(考核對(duì)事件對(duì)象ev的了解程度,以及在IE下對(duì)應(yīng)的屬性名)
用target,currentTarget,以及IE下的srcElement和this(說完這些可略過了)
5、實(shí)現(xiàn)事件模型
即寫一個(gè)類或是一個(gè)模塊,有兩個(gè)函數(shù),一個(gè)bind一個(gè)trigger,分別實(shí)現(xiàn)綁定事件和觸發(fā)事件,核心需求就是可以對(duì)末一個(gè)事件名稱綁定多個(gè)事件響應(yīng)函數(shù),然后觸發(fā)這個(gè)事件名稱時(shí),依次按綁定順序觸發(fā)相應(yīng)的響應(yīng)函數(shù)。
(這個(gè)需求如果對(duì)于做過C#的人來講就再熟悉不過,他根本就是C#中的【委托】(delegate)。而委托與事件幾乎是一家子。回到前面說的題目,大致實(shí)現(xiàn)思路就是創(chuàng)建一個(gè)類或是匿名函數(shù),在bind和trigger函數(shù)外層作用域創(chuàng)建一個(gè)字典對(duì)象,用于存儲(chǔ)注冊(cè)的事件及響應(yīng)函數(shù)列表,bind時(shí),如果字典沒有則創(chuàng)建一個(gè),key是事件名稱,value是數(shù)組,里面放著當(dāng)前注冊(cè)的響應(yīng)函數(shù),如果字段中有,那么就直接push到數(shù)組即可。trigger時(shí)調(diào)出來依次觸發(fā)事件響應(yīng)函數(shù)即可)
6、事件廣播(dispatchEvent)
一般在元素上綁定事件后,是靠用戶在這些元素上的鼠標(biāo)行為來捕獲或者觸發(fā)事件的,或者自帶的瀏覽器行為事件,比如click,mouseover,load等等,有些時(shí)候我們需要自定義事件或者在特定的情況下需要觸發(fā)這些事件。這時(shí)可以使用IE下fireEvent方法,高級(jí)瀏覽器(chrome,firefox等)有dispatchEvent方法。