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

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

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

 
 
 
 
 







    

    

    
第一種方法：浮動

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

    
    
    
    
    


    
    

        

        
第二種方法：定位
        

    



//abosulute屬性的元素有包裹性  如果不設置寬高的話  自適應元素內部的內容 這里用left  和right值的設置來自適應外部元素

解決方案三：使用flex布局

    
    
    
    
    


    
    

        

        
第三種方法：flexbox布局
        

    

方案四、表格布局

    
    
    
    
    


    
    

        

        
第四種方法：表格布局
        

    

方案五：grid布局

    
    
    
    
    


    
    

        

        
第五種方法：網格布局
        

    

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

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

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

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

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

#box {  
width:100px !important; // ie9,ff,chrome,opera這樣的標準瀏覽器
width:160px; //所有的瀏覽器；它的本意是只對不認識!important的設置?？墒莍e7、ie8也認識
+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對盒子模型的設置
box-sizing：content-box和border-box

4.垂直外邊距合并

5.BFC

1.DOM概念

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

2.BOM概念

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

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

常用的DOM方法:

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

常用的DOM屬性

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

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

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

click me

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

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

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

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

alert("you click the first function");

};
click.onclick = function(){

alert("you click the second function")

}
　　在這段代碼中，我們為dom對象注冊了兩個onclick函數，但是結果是只執行了第二個注冊的函數，前面所注冊的函數被覆蓋了。
（2）　在DOM2級中使用addEventListener和removeEventListener來注冊和解除事件（IE8及之前版本不支持）。這種函數較之之前的方法好處是一個dom對象可以注冊多個相同類型的事件，不會發生事件的覆蓋，會依次的執行各個事件函數。
（3）DOM3是一些新的事件, 區別DOM3和DOM2的方法我感覺是DOM3事件有分大小寫的,DOM2沒有;
2.dom事件模型
DOM事件模型分為兩類：一類是IE所使用的冒泡型事件（Bubbling）；另一類是DOM標準定義的冒泡型與捕獲型（Capture）的事件。除IE外的其他瀏覽器都支持標準的DOM事件處理模型。
3.dom事件流
DOM的結構是一個樹形，每當HTML元素產生事件時，該事件就會在樹的根節點和元素節點之間傳播，所有經過的節點都會收到該事件。
DOM2級事件模型中規定了事件流的三個階段：捕獲階段、目標階段、冒泡階段，低版本IE（IE8及以下版本）不支持捕獲階段
4.dom事件捕獲的具體流程
詳見：http://www.cnblogs.com/bfgis/...
http://blog.sina.com.cn/s/blo...
5.event對象的常見應用
http://ghmagical.com/article/...
6.自定義事件
一般我們在元素上綁定事件后，是靠用戶在這些元素上的鼠標行為來捕獲或者觸發事件的，或者自帶的瀏覽器行為事件，比如click，mouseover，load等等，有些時候我們需要自定義事件或者在特定的情況下需要觸發這些事件。
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);
});
//調用document對象的createEventObject方法得到一個event的對象實例。
var event = document.createEventObject();
event.eventType = "message";
//觸發document上綁定的自定義事件ondataavailable
document.fireEvent("ondataavailable", event);
//觸發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);
//調用document對象的 createEvent 方法得到一個event的對象實例。
var event = document.createEvent("HTMLEvents");
// initEvent接受3個參數：
// 事件類型，是否冒泡，是否阻止瀏覽器的默認行為
event.initEvent("ondataavailable", true, true);
event.eventType = "message";
//觸發document上綁定的自定義事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent("HTMLEvents");
event1.initEvent("click", true, true);
event1.eventType = "message";
//觸發obj元素上綁定click事件
document.getElementById("test").onclick = function () {
    obj.dispatchEvent(event1);
};

7.事件的委托（代理 Delegated Events）的原理以及優缺點。
委托（代理）事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。這是靠事件的冒泡機制來實現的，
優點是：
（1）可以大量節省內存占用，減少事件注冊，比如在table上代理所有td的click事件就非常棒。
（2）可以實現當新增子對象時無需再次對其綁定事件，對于動態內容部分尤為合適
缺點是：
事件代理的應用常用應該僅限于上述需求下，如果把所有事件都用代理就可能會出現事件誤判，即本不應用觸發事件的被綁上了事件。
8.手寫原生js實現事件代理，并要求兼容瀏覽器。

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();
}
//調用
var odiv = document.getElementById("oDiv");
delegateEvent(odiv,"a","click",function(){
    alert("1");