關(guān)于事件,面試有很大幾率會(huì)問到的

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方法。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 關(guān)于事件1、事件的三個(gè)階段捕獲 目標(biāo) 冒泡低版本IE(IE8及以下版本)不支持捕獲階段捕獲事件流:Nets...
    Mr夜空閱讀 1,695評(píng)論 1 46
  • 以下文章為轉(zhuǎn)載,對(duì)理解JavaScript中的事件處理機(jī)制很有幫助,淺顯易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy閱讀 3,069評(píng)論 1 10
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,947評(píng)論 18 139
  • 請(qǐng)參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,179評(píng)論 2 19
  • 創(chuàng)建全國(guó)文明城市已進(jìn)入沖刺階段,近期以來,渣管科深入開展渣土運(yùn)輸管理專項(xiàng)整治工作,由渣管科、交管科等部門積...
    wuouwuouou閱讀 199評(píng)論 0 0