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

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

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

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

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


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

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

但也不是沒有優(yōu)點，這種方式兼容所有瀏覽器

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

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

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

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

參數(shù)說明：

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

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

DOM2 級事件模型 W3C標(biāo)準(zhǔn)模型，也是我們頻繁使用的事件模型，除 IE6-8 以外的所有現(xiàn)代瀏覽器都支持該事件模型

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

事件捕獲階段：事件從 document 向下傳播到目標(biāo)元素，依次檢查所有節(jié)點是否綁定了監(jiān)聽事件，如果有則執(zhí)行

事件處理階段：事件在達到目標(biāo)元素時，觸發(fā)監(jiān)聽事件

事件冒泡階段：事件從目標(biāo)元素冒泡到 document，并且一次檢查各個節(jié)點是否綁定了監(jiān)聽函數(shù)，如果有則執(zhí)行

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

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

input.addEventListener( "click" ,a)

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

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

• Dom0 模型：

this指向：指向函數(shù)中的this指向的是被綁定的元素

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

IE 模型：

this指向：指向函數(shù)中的this指向的是**window**

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

只有兩個參數(shù)：第一個參數(shù)為 事件類型，第二個為事件執(zhí)行函數(shù)

目標(biāo)階段，事件冒泡階段

獲取目標(biāo)元素：window.event.srcElement

Dom2 模型：

this指向：指向函數(shù)中的this指向的是被綁定的元素

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

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

有事件捕獲階段，處于目標(biāo)階段，事件冒泡階段

獲取目標(biāo)元素：event.target 歡迎補充。。。

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

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

1、事件冒泡

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

2、事件捕獲

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

第四問 怎么阻止事件冒泡和事件捕獲以及默認(rèn)事件？

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

function stopBubble(e){

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

window.event.cancelBubble = true;
}
}

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

阻止默認(rèn)事件：

function stopDefault(e){

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

windown.event.returnValue = false
}
}

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

優(yōu)點是：

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

(2)可以實現(xiàn)當(dāng)新增子對象時無需再次對其綁定事件，對于動態(tài)內(nèi)容部分尤為合適

缺點是：

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

例子：

<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下事件對應(yīng)的屬性名。重點是要說到target,currentTarget以及IE下的srcElement和this。

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

可能談到Evnet，customerEvent，document.createEvent

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

在工作過程中，經(jīng)常會遇到按需加載的需求，即在腳本加載完成后，返回一個回調(diào)函數(shù)，在回調(diào)函數(shù)中進行相關(guān)操作，那如何去判斷腳本是否加載完成了呢？

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

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

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')?{
????????????????//?異步j(luò)s加載完畢
????????????????//?do?something執(zhí)行操作
????????????}
????????}
????}
}

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

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

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

方式一：window.onload：

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

window.onload=function(){

　　　　　　　　dosth//你要做的事情

　　　　}

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

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

$(document).ready(function(){

　　　　　　dosth//你要做的事情

　　　　})

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

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

　　　　{

　　　　　　 if(document.readyState == "complete")

　　　　　　{ 　　//當(dāng)頁面加載狀態(tài)為完全結(jié)束時進入
　　　　init();　　 //你要做的操作。
　　　　　 }
　　　　}

第十一問 cookie和session的區(qū)別：

①存在的位置：

cookie 存在于客戶端，臨時文件夾中；session存在于服務(wù)器的內(nèi)存中，一個session域?qū)ο鬄橐粋€用戶瀏覽器服務(wù)

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

③網(wǎng)絡(luò)傳輸量 cookie會傳遞消息給服務(wù)器；session本身存放于服務(wù)器，不會有傳送流量

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。