“约见”面试官系列之常见面试题之第六十一篇之IE和DOM事件流（建议收藏）
什么是“事件流”？
事件流描述的是從頁面中接收事件的順序
事件流的種類：
事件流主要分為三種
- 事件冒泡流(IE事件流)：事件開始時由最具體的元素(文檔中嵌套最深的那個節(jié)點)接收，然后逐級向上傳播到較為不具體的節(jié)點(文檔)
- 事件捕獲流(Netscape事件流)：不太具體的節(jié)點最先接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件(在事件到達預定目標之前捕獲到)
- DOM事件流：事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機會；然后是實際的目標接收事件；最后是冒泡階段，可以在這個階段對事件做出響應(yīng)。
IE和DOM事件流的區(qū)別：
IE和DOM事件流的區(qū)別主要有四個方面不一樣
- 執(zhí)行的順序不一樣：事件俺的執(zhí)行順序不一樣
????? 案例為：
<body><div><button id = 'btn'>點擊<button></div></body>三種事件流分別是：
冒泡型事件模型(IE事件流)： button->div->body
捕獲型事件模型(Netscape事件流)： body->div->button
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
- IE和DOM事件偵聽函數(shù)的區(qū)別：
?
- 事件參數(shù)不一樣和this指向不一樣
???????如上的兩個不一樣的事件偵聽函數(shù)：
????? attachEvent接受兩個參數(shù)，第一個參數(shù)是事件名稱，第二個fnHandler是回調(diào)處理函數(shù)
?????????? 注意：IE下利用attachEvent注冊的處理函數(shù)調(diào)用時this指向不再是先前注冊事件的元素，這時的this為window對象了
?????? addEventListener方法接受三個參數(shù)：
?????????? 第一個參數(shù)是事件名稱，值得注意的是，這里事件名稱與IE的不同，事件名稱是沒’on’開頭的;
???????????第二個參數(shù)fnHandler是回調(diào)處理函數(shù);
?????????? 第三個參數(shù)注明該處理回調(diào)函數(shù)是在事件傳遞過程中的捕獲階段被調(diào)用還是冒泡階段被調(diào)用
???????????注意：它可以在一個DOM元素上綁定多個事件處理器，并且在處理函數(shù)內(nèi)部，this關(guān)鍵字仍然指向被綁定的DOM元素，另外處理函數(shù)參數(shù)列表的第一個位置傳遞事件event對象
本面試題為前端常考面試題，后續(xù)有機會繼續(xù)完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?
總結(jié)
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第六十一篇之IE和DOM事件流（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【书】Head First设计模式(中文
- 下一篇： 材料成形计算机辅助设计,材料成形及控制工