摘要：接受個參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當(dāng)滿足一定匹配條件時才會被挪。

1.問題：假設(shè)高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。

解決方案一：使用浮動布局`

 
 
 
 
 







    

    

    
第一種方法：浮動

`
解決方案二：使用絕對定位布局

    
    
    
    
    


    
    

        

        
第二種方法：定位
        

    



//abosulute屬性的元素有包裹性  如果不設(shè)置寬高的話  自適應(yīng)元素內(nèi)部的內(nèi)容 這里用left  和right值的設(shè)置來自適應(yīng)外部元素

解決方案三：使用flex布局

    
    
    
    
    


    
    

        

        
第三種方法：flexbox布局
        

    

方案四、表格布局

    
    
    
    
    


    
    

        

        
第四種方法：表格布局
        

    

方案五：grid布局

    
    
    
    
    


    
    

        

        
第五種方法：網(wǎng)格布局
        

    

拓展1：這幾種布局的優(yōu)缺點？兼容性怎么樣？如果高度不設(shè)置的話，哪個不能適用？
拓展2：兩欄布局怎么實現(xiàn)？
小總結(jié)：就像解決數(shù)學(xué)題一樣，如果沒有已知條件的話，那么情況有很多種很多種可能，已知條件越多，那么是什么樣的情況就被限定范圍了，反而更好地解決。有時候已知條件太少，還要假設(shè)已知條件呢。嘿嘿嘿

1.如何理解盒子模型（基本概念）？

文檔中每個元素都會被描述為一個矩形盒子，盒子有一個邊界，分別為margin edge，border edge，padding-edge，content edge。
盒子模型分為標(biāo)準(zhǔn)盒子模型和IE盒子模型（微軟沒有遵從W3C標(biāo)準(zhǔn)）

這兩者的關(guān)鍵差別就在于：W3C盒子模型——屬性高（height）和屬性寬（width）這兩個值不包含 填充（padding）和邊框（border）;IE盒子模型——屬性高（height）和屬性寬（width）這兩個值包含 填充（padding）和邊框（border）。

（1）“標(biāo)準(zhǔn)模式”下各個瀏覽器是沒有區(qū)別的，以寬度為例：總寬度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C標(biāo)準(zhǔn)盒子模型）。頁面在“怪異模式”下，css中為元素的width和height設(shè)置的值在標(biāo)準(zhǔn)瀏覽器和ie系列(ie9除外)里的代表的含義是不同的（IE盒子模型）。也就是說在‘怪異模式’下ie瀏覽器使用的是I盒子模型。
（2）標(biāo)準(zhǔn)模式和怪異模式的來由？
在HTML與CSS的標(biāo)準(zhǔn)化未完成之前，各個瀏覽器對于HTML和CSS的解析有各自不同的實現(xiàn)，而有很多舊的網(wǎng)頁都是按照這些非標(biāo)準(zhǔn)的實現(xiàn)去設(shè)計的。在HTML與CSS標(biāo)準(zhǔn)確定之后，瀏覽器一方面要按照標(biāo)準(zhǔn)去實現(xiàn)對HTML與CSS的支持，另一方面又要保證對非標(biāo)準(zhǔn)的舊網(wǎng)頁設(shè)計的后向兼容性。因此，現(xiàn)代的瀏覽器一般都有兩種渲染模式：標(biāo)準(zhǔn)模式和怪異模式。在標(biāo)準(zhǔn)模式下，瀏覽器按照HTML與CSS標(biāo)準(zhǔn)對文檔進行解析和渲染；而在怪異模式下，瀏覽器則按照舊有的非標(biāo)準(zhǔn)的實現(xiàn)方式對文檔進行解析和渲染。這樣的話，對于舊有的網(wǎng)頁，瀏覽器啟動怪異模式，就能夠使得舊網(wǎng)頁正常顯示；對于新的網(wǎng)頁，則可以啟動標(biāo)準(zhǔn)模式，使得新網(wǎng)頁能夠使用HTML與CSS的標(biāo)準(zhǔn)特性。
（3）瀏覽器如何確定使用哪種渲染模式
知道了這兩種渲染模式的來由，那剩下的問題就是瀏覽器如何能夠確定應(yīng)該使用哪種模式了。其實歸根結(jié)底就是，瀏覽器如何能將舊網(wǎng)頁與新網(wǎng)頁區(qū)分開來。
平常編寫網(wǎng)頁的時候，一般都會見到HTML文檔的頭部會有文檔類型聲明：DOCTYPE。當(dāng)瀏覽器遇到正確的文檔聲明時，瀏覽器就會啟動標(biāo)準(zhǔn)模式，按照制定的文檔類型標(biāo)準(zhǔn)解析和渲染文檔。而對于舊有的網(wǎng)頁，由于網(wǎng)頁編寫的當(dāng)時標(biāo)準(zhǔn)還沒有確定，所以一般是不會有文檔類型聲明的。所以，對于沒有文檔類型聲明或者文檔類型聲明不正確的文檔，瀏覽器就會認(rèn)為它是一個舊的HTML文檔，就會使用怪異模式解析和渲染該文檔。關(guān)于DOCTYPE的更詳細(xì)說明，請戳這里 DOCTYPE聲明作用及用法詳解。
（4）如何兼容IE模型
前提是頁面處于“怪異模式”，“標(biāo)準(zhǔn)模式”不存在兼容性問題。
1）hack
假設(shè)內(nèi)容的寬度必須固定為100px。

#box {  
width:100px !important; // ie9,ff,chrome,opera這樣的標(biāo)準(zhǔn)瀏覽器
width:160px; //所有的瀏覽器；它的本意是只對不認(rèn)識!important的設(shè)置。可是ie7、ie8也認(rèn)識
+width:160px!important;//ie7
width:160px/0!important;//ie8
padding:0 10px;border:20px solid blue;margin:70px;  
}  

2）wrapper

#box {  
width:100px;  
margin:70px;  
float:left;  
}  
.wrapper {  
padding:0 10px;border:20px solid blue;  
} 

（5）Css3對盒子模型的設(shè)置
box-sizing：content-box和border-box

4.垂直外邊距合并

5.BFC

1.DOM概念

DOM 全稱是 Document Object Model，也就是文檔對象模型。DOM 就是針對 HTML 和 XML 提供的一個API。什么意思？就是說為了能以編程的方法操作這個 HTML 的內(nèi)容（比如添加某些元素、修改元素的內(nèi)容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和里面的所有東西比如

2.BOM概念

BOM是 Browser Object Model，瀏覽器對象模型。剛才說過 DOM 是為了操作文檔出現(xiàn)的接口，那 BOM 顧名思義其實就是為了控制瀏覽器的行為而出現(xiàn)的接口。瀏覽器可以做什么呢？比如跳轉(zhuǎn)到另一個頁面、前進、后退等等，程序還可能需要獲取屏幕的大小之類的參數(shù)。所以 BOM 就是為了解決這些事情出現(xiàn)的接口。比如我們要讓瀏覽器跳轉(zhuǎn)到另一個頁面，只需要location.;
這個 location 就是 BOM 里的一個對象。windowwindow 也是 BOM 的一個對象，除去編程意義上的“兜底對象”之外，通過這個對象可以獲取窗口位置、確定窗口大小、彈出對話框等等。例如我要關(guān)閉當(dāng)前窗口：window.close();
總結(jié)一下題主的問題：DOM 是為了操作文檔出現(xiàn)的 API，document 是其的一個對象；BOM 是為了操作瀏覽器出現(xiàn)的 API，window 是其的一個對象。

3.DOM有哪些方法和屬性？

常用的DOM方法:

getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()

常用的DOM屬性

innerHTML  節(jié)點(元素)的文本值
parentNode  節(jié)點(元素)的父節(jié)點
childNodes 
attributes   節(jié)點(元素)的屬性節(jié)點

3.DOM事件基本概念（級別）

javascript操作CSS稱為腳本化CSS，而javascript與HTML的交互是通過事件實現(xiàn)的。事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間，而事件流(又叫事件傳播)描述的是從頁面中接收事件的順序。
（1）　DOM0級事件模型是早期的事件模型，所有的瀏覽器都是支持的，而且其實現(xiàn)也是比較簡單。代碼如下：

click me

　　這種事件模型就是直接在dom對象上注冊事件名稱，這段代碼就是在p標(biāo)簽上注冊了一個onclick事件，在這個事件函數(shù)內(nèi)部輸出點擊的目標(biāo)。而解除事件則更加簡單，就是將null復(fù)制給事件函數(shù)，如下：

document.getElementById("click"_).onclick = null;

　　由此我們可以知道dom0中，一個dom對象只能注冊一個同類型的函數(shù)，因為注冊多個同類型的函數(shù)的話，就會發(fā)生覆蓋，之前注冊的函數(shù)就會無效。
復(fù)制代碼

var click = document.getElementById("click");
click.onclick = function(){

alert("you click the first function");

};
click.onclick = function(){

alert("you click the second function")

}
　　在這段代碼中，我們?yōu)閐om對象注冊了兩個onclick函數(shù)，但是結(jié)果是只執(zhí)行了第二個注冊的函數(shù)，前面所注冊的函數(shù)被覆蓋了。
（2）　在DOM2級中使用addEventListener和removeEventListener來注冊和解除事件（IE8及之前版本不支持）。這種函數(shù)較之之前的方法好處是一個dom對象可以注冊多個相同類型的事件，不會發(fā)生事件的覆蓋，會依次的執(zhí)行各個事件函數(shù)。
（3）DOM3是一些新的事件, 區(qū)別DOM3和DOM2的方法我感覺是DOM3事件有分大小寫的,DOM2沒有;
2.dom事件模型
DOM事件模型分為兩類：一類是IE所使用的冒泡型事件（Bubbling）；另一類是DOM標(biāo)準(zhǔn)定義的冒泡型與捕獲型（Capture）的事件。除IE外的其他瀏覽器都支持標(biāo)準(zhǔn)的DOM事件處理模型。
3.dom事件流
DOM的結(jié)構(gòu)是一個樹形，每當(dāng)HTML元素產(chǎn)生事件時，該事件就會在樹的根節(jié)點和元素節(jié)點之間傳播，所有經(jīng)過的節(jié)點都會收到該事件。
DOM2級事件模型中規(guī)定了事件流的三個階段：捕獲階段、目標(biāo)階段、冒泡階段，低版本IE（IE8及以下版本）不支持捕獲階段
4.dom事件捕獲的具體流程
詳見：http://www.cnblogs.com/bfgis/...
http://blog.sina.com.cn/s/blo...
5.event對象的常見應(yīng)用
http://ghmagical.com/article/...
6.自定義事件
一般我們在元素上綁定事件后，是靠用戶在這些元素上的鼠標(biāo)行為來捕獲或者觸發(fā)事件的，或者自帶的瀏覽器行為事件，比如click，mouseover，load等等，有些時候我們需要自定義事件或者在特定的情況下需要觸發(fā)這些事件。
http://www.cnblogs.com/lvdaba...
補充：
這個時候我們可以使用IE下fireEvent方法，高級瀏覽器（chrome,firefox等）有dispatchEvent方法。

ie下的例子：

//document上綁定自定義事件ondataavailable

document.attachEvent("ondataavailable", function (event) {
    alert(event.eventType);
});
var obj=document.getElementById("obj");
//obj元素上綁定click事件
obj.attachEvent("onclick", function (event) {
alert(event.eventType);
});
//調(diào)用document對象的createEventObject方法得到一個event的對象實例。
var event = document.createEventObject();
event.eventType = "message";
//觸發(fā)document上綁定的自定義事件ondataavailable
document.fireEvent("ondataavailable", event);
//觸發(fā)obj元素上綁定click事件
document.getElementById("test").onclick = function () {
    obj.fireEvent("onclick", event);
};

高級瀏覽器（chrome,firefox等）的例子：

//document上綁定自定義事件ondataavailable
document.addEventListener("ondataavailable", function (event) {
    alert(event.eventType);
}, false);
var obj = document.getElementById("obj");
//obj元素上綁定click事件
obj.addEventListener("click", function (event) {
    alert(event.eventType);
}, false);
//調(diào)用document對象的 createEvent 方法得到一個event的對象實例。
var event = document.createEvent("HTMLEvents");
// initEvent接受3個參數(shù)：
// 事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為
event.initEvent("ondataavailable", true, true);
event.eventType = "message";
//觸發(fā)document上綁定的自定義事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent("HTMLEvents");
event1.initEvent("click", true, true);
event1.eventType = "message";
//觸發(fā)obj元素上綁定click事件
document.getElementById("test").onclick = function () {
    obj.dispatchEvent(event1);
};

7.事件的委托（代理 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ā)事件的被綁上了事件。
8.手寫原生js實現(xiàn)事件代理，并要求兼容瀏覽器。

function delegateEvent(interfaceEle, selector, type, fn) {
    if(interfaceEle.addEventListener){
    interfaceEle.addEventListener(type, eventfn);
    }else{
    interfaceEle.attachEvent("on"+type, eventfn);
    }
     
    function eventfn(e){
    var e = e || window.event;    
    var target = e.target || e.srcElement;
    if (matchSelector(target, selector)) {
            if(fn) {
                fn.call(target, e);
            }
        }
    }
}

/**
 * only support #id, tagName, .className
 * and it"s simple single, no combination
 */
function matchSelector(ele, selector) {
    // if use id
    if (selector.charAt(0) === "#") {
        return ele.id === selector.slice(1);
    }
    // if use class
    if (selector.charAt(0) === ".") {
        return (" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1;
    }
    // if use tagName
    return ele.tagName.toLowerCase() === selector.toLowerCase();
}
//調(diào)用
var odiv = document.getElementById("oDiv");
delegateEvent(odiv,"a","click",function(){
    alert("1");