第一問：請介紹下事件模型

目前共有三種事件模型，它們分別是：

DOM0 級事件模型、IE 事件模型、DOM2 級事件模型

DOM0 級事件模型 又稱原始事件模型，有兩種方式，最直觀的提下如下代碼：

// 方式一
// 將事件直接通過屬性綁定在元素上


// 方式二
// 獲取到頁面元素后，通過 onclick 等事件，將觸發的方法指定為元素的事件
// 取消該事件可直接設置為 null
var btn = document.getElementById('btn')
btn.onclick = function () {...}
btn.onclick = null

DOM0 級的事件模型，方法較為簡單，但是將邏輯和界面耦合在了一起，對之后的維護不是很友好

但也不是沒有優點，這種方式兼容所有瀏覽器

IE 事件模型 IE 事件模型一共有兩個階段：

事件處理階段：事件在達到目標元素時，觸發監聽事件 事件冒泡階段：事件從目標元素冒泡到 document，并且一次檢查各個節點是否綁定了監聽函數，如果有則執行 綁定和移除事件的 api 分別如下：

// 綁定事件
el.attachEvent(eventType, handler)

// 移除事件
el.detachEvent(eventType, handler)

參數說明：

eventType 是如onclick一樣的帶有”on“的事件，綁定事件時，handler可以是具名函數，也可以是匿名函數，但是匿名函數無法移除

我們會發現，IE 事件模型與我們平時用的事件綁定方法addEventListener，也就是下面要說的 DOM2 級事件模型有點相似，但是 IE 事件模型僅在 IE 瀏覽器中有效，不兼容其他瀏覽器

DOM2 級事件模型 W3C標準模型，也是我們頻繁使用的事件模型，除 IE6-8 以外的所有現代瀏覽器都支持該事件模型

DOM2 級事件模型共有三個階段：

事件捕獲階段：事件從 document 向下傳播到目標元素，依次檢查所有節點是否綁定了監聽事件，如果有則執行

事件處理階段：事件在達到目標元素時，觸發監聽事件

事件冒泡階段：事件從目標元素冒泡到 document，并且一次檢查各個節點是否綁定了監聽函數，如果有則執行

function a() {?? ...?? }

? function b() {?? ...?? }

input.addEventListener( "click" ,a)

??input.removeEventListener( "click" ,a)

第二問：介紹下這三種事件模型的區別

• Dom0 模型：

this指向：指向函數中的this指向的是被綁定的元素

綁定多個同事件類型的事件時，如對同個元素綁定多個click，則后面的會覆蓋前面的，最后只有一個會執行

IE 模型：

this指向：指向函數中的this指向的是**window**

綁定多個同事件類型的事件時，如對同個元素綁定多個click，則后面的不會覆蓋前面的，執行順序是先執行下面的，從下往上執行

只有兩個參數：第一個參數為 事件類型，第二個為事件執行函數

目標階段，事件冒泡階段

獲取目標元素：window.event.srcElement

Dom2 模型：

this指向：指向函數中的this指向的是被綁定的元素

綁定多個同事件類型的事件時，如對同個元素綁定多個click，則后面的不會覆蓋前面的，執行順序是先執行上面的，從上往下執行

有三個參數：第一個參數為 事件類型，第二個為事件執行函數，第三個為布爾值，表示是否用事件捕獲

有事件捕獲階段，處于目標階段，事件冒泡階段

獲取目標元素：event.target 歡迎補充。。。

第三問：請介紹下事件流？

事件流所描述的就是從頁面中接受事件的順序，事件流分為兩種：事件冒泡(主流)和事件捕獲. 版本IE(IE8及以下版本)不支持捕獲階段

1、事件冒泡

事件開始時由具體元素接收，然后逐級向上傳播到父元素

2、事件捕獲

父元素的節點更早接收事件，而具體元素最后接收事件，與事件冒泡相反

第四問 怎么阻止事件冒泡和事件捕獲以及默認事件？

阻止事件冒泡 ：使用e.stopPropagation(); IE使用 window.event.cancelBubble = true;

function stopBubble(e){

if(e&&e.stopPropagation){
e.stopPropagation();
}else{

window.event.cancelBubble = true;
}
}

阻止事件捕獲：與冒泡一樣 使用`e.stopPropagation()，IE沒有捕獲階段，所以不用

阻止默認事件：

function stopDefault(e){

if(e&&e.preventDefault()){
e.preventDefault();
}else{

windown.event.returnValue = false
}
}

第六問：事件的委托(代理 Delegated Events)的原理以及優缺點委托(代理)事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。這是靠事件的冒泡機制來實現的，

優點是：

(1)可以大量節省內存占用，減少事件注冊，比如在table上代理所有td的click事件就非常棒

(2)可以實現當新增子對象時無需再次對其綁定事件，對于動態內容部分尤為合適

缺點是：

事件代理的應用常用應該僅限于上述需求下，如果把所有事件都用代理就可能會出現事件誤判，即本不應用觸發事件的被綁上了事件。

例子：

<ul?id="parent">
??<li?class="child">oneli>
??<li?class="child">twoli>
??<li?class="child">threeli>
ul>
?
<script?type="text/javascript">//父元素var?dom=?document.getElementById('parent');//父元素綁定事件，代理子元素的點擊事件
??dom.οnclick=?function(event)?{var?event=?event?||?window.event;var?curTarget=?event.target?||?event.srcElement;if?(curTarget.tagName.toLowerCase()?==?'li')?{//事件處理
????}
??}script>

要求：兼容瀏覽器 考點：事件對象e，IE下事件對應的屬性名。重點是要說到target,currentTarget以及IE下的srcElement和this。

第七問：編寫一個自定義事件類，包含on/off/emit/once方法

可能談到Evnet，customerEvent，document.createEvent

第八問：怎樣判斷js腳本是否加載完，并在加載完后進行操作

在工作過程中，經常會遇到按需加載的需求，即在腳本加載完成后，返回一個回調函數，在回調函數中進行相關操作，那如何去判斷腳本是否加載完成了呢？

可以對加載的js對象使用onload來判斷，jsDom.onload

ie6、7不支持js.onload方法，使用js.onreadystatechange來解決 js.onreadystatechange來跟蹤每個狀態的變化(loading、loaded、interactive、complete)，當返回狀態為loaded或者complete時，表示加載完成，返回回調函數.

function?loadJsAsync(url){
????var?body?=?document.getElementsByTagName('body')[0];
????var?jsNode?=?document.createElement('script');

????jsNode.setAttribute('type',?'text/javascript');
????jsNode.setAttribute('src',?url);
????body.appendChild(jsNode);

????if?(jsNode.onload)?{
????????jsNode.onload?=?function()?{
????????????//?do?something
????????}
????}?else?{
????????//?ie6,?ie7不支持onload的情況
????????jsNode.onreadystatechange?=?function()?{
????????????if(jsNode.readyState?==?'loaded'?||?jsNode.readyState?==?'complete')?{
????????????????//?異步js加載完畢
????????????????//?do?something執行操作
????????????}
????????}
????}
}

第九問：上面的代碼中，script腳本是什么時候開始加載的？

在 body.appendChild(jsNode);這一步，即添加到文檔上后開始加載，這跟image不同，image是image.src = url后開始加載

第十問 ?如何判斷頁面是否加載完成？

方式一：window.onload：

當一個文檔完全下載到瀏覽器中時，才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操作的，也就是說頁面上的所有元素加載完畢才會執行。這種情況對編寫功能性代碼非常有利，因為無需考慮加載的次序。

window.onload=function(){

　　　　　　　　dosth//你要做的事情

　　　　}

方式二：$(document).ready()：

會在DOM完全就緒并可以使用時調用。雖然這也意味著所有元素對腳本而言都是可以訪問的，但是，并不意味著所有關聯的文件都已經下載完畢。換句話說，當HMTL下載完成并解析為DOM樹之后，代碼就會執行。

$(document).ready(function(){

　　　　　　dosth//你要做的事情

　　　　})

注意：頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成(不包含圖片等非文字媒體文件)，二是onload，指示頁 面包含圖片等文件在內的所有元素都加載完成。(可以說：ready 在onload 前加載！！！)

方式三：用document.onreadystatechange的方法來監聽狀態改變， 然后用document.readyState == “complete”判斷是否加載完成,需要的朋友可以參考下，用document.onreadystatechange的方法來監聽狀態改變， 然后用document.readyState == “complete”判斷是否加　 ?載完成document.onreadystatechange = function()　　//當頁面加載狀態改變的時候執行function

　　　　{

　　　　　　 if(document.readyState == "complete")

　　　　　　{ 　　//當頁面加載狀態為完全結束時進入
　　　　init();　　 //你要做的操作。
　　　　　 }
　　　　}

第十一問 cookie和session的區別：

①存在的位置：

cookie 存在于客戶端，臨時文件夾中；session存在于服務器的內存中，一個session域對象為一個用戶瀏覽器服務

②安全性 cookie是以明文的方式存放在客戶端的，安全性低，可以通過一個加密算法進行加密后存放；session存放于服務器的內存中，所以安全性好

③網絡傳輸量 cookie會傳遞消息給服務器；session本身存放于服務器，不會有傳送流量

④生命周期(以20分鐘為例) cookie的生命周期是累計的，從創建時，就開始計時，20分鐘后，cookie生命周期結束；session的生命周期是間隔的，從創建時，開始計時如在20分鐘，沒有訪問session，那么session生命周期被銷毀。但是，如果在20分鐘內(如在第19分鐘時)訪問過session，那么，將重新計算session的生命周期。關機會造成session生命周期的結束，但是對cookie沒有影響

⑤訪問范圍 cookie為多個用戶瀏覽器共享；session為一個用戶瀏覽器獨享

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的table高度改变时触发什么事件_（立下flag）每日10道前端面试题11 关于事件十问...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。