前端基本知識（一）：W3C标準&&冒泡事件，捕獲事件，W3C DOM對象模型，對比分析

W3C标準是網際網路聯盟，

其他的可以參考網際網路版本的更新内容

一、W3C标準

二、W3C DOM事件

三、冒泡事件

四、捕獲事件

五、對比分析

其實網頁是由三分部組成：1、結構（structure），2、表現（prentation），3、行為（behavior）

對應的标準也分為三部分：1、結構化标準語言，主要包括xml和xhtml；2、表現标準語言，主要包括css；3、行為标準語言主要包括對象模型（W3C DOM）和ECMAScript。這些标準大部分由W3C起草和釋出，也有一些是其他标準組織制訂的标準，比如ECMA（European Computer Manufacturers Association）的ECMAScript标準。

1、結構化标準語言，主要包含可擴充标記語言（XML）和可擴充超文本标記語言（XHTML）。

xml設計之初是為了補充html的，但是随着xml滿足網絡資訊釋出的需要，逐漸應用在資料的轉換和描述上。xml資料轉換功能十分強大，但是在面對成千上萬個站點資訊直接使用xml還不行，是以引入XHTML，目的是為了把html向xml過渡。

2、表現标準語言，主要是包含css樣式。主流浏覽器正在逐漸支援，程式員也開始利用CSS3代替以往冗長的舊代碼。使用css和xhtml是為了讓把結構和樣式進行分離，便于代碼的維護。

3、行為标準語言，主要包好對象模型（W3C DOM）和ECMAScript。DOM是一種與浏覽器，平台，語言的接口。解決了設計師和web開發者提供一個标準，讓他們通路站點中的資料，腳本，表現層對象。ECMAScript是ECMA(European Computer Manufacturers Association)制定的标準腳本語言（JAVAScript）。現推薦遵循的是ECMAScript 262

二、冒泡事件模型

什麼是冒泡事件，在面試中面試官經常會問你相關的一些前端的開發基本功，現在自己總結一下，

答：冒泡事件就是從最精确的目标（target）到最不精确的目标進行順序觸發。

三、事件捕獲模型

什麼是事件捕獲？

答：事件捕獲是從最不精确的目标到最精确的目标進行順序觸發。

四、W3C DOM對象模型

什麼是DOM對象模型？

答：DOM對象模型是包含了“冒泡事件“和“事件捕獲”這兩個事件模型。兩種事件流會觸及所有的對象，從document開始，到document結束。

五、 對比分析：

1、支援W3C标準的浏覽器的給元素添加事件的方法，使用addeventListener函數，使用樣例addEventListener(event,fn,useCapture)來設定事件是在冒泡時執行還是在事件捕獲時執行。第三個參數使用布爾型，true或者false來表示；

使用true，意思就是事件捕獲

使用false，意思就是冒泡事件

2、不支援W3C标準的浏覽器(IE)給元素添加事件方法，使用attachevent函數，使用樣例attachevent（event，fn），預設的是false，起到了相容浏覽器效果，也就是說，IE浏覽器隻支援事件冒泡。

看這張圖就很清楚了事件捕獲和冒泡原型。

3、事件捕獲階段：事件從最上一級的标簽開始查找，直到捕獲事件目标

事件冒泡階段：事件從事件目标開始，往上冒泡直到頁面的最上一級标簽

4、舉一個例子

<div>
　　<p>點我看效果</p>
</div>      

這兩個元素都綁定了click事件，如果使用者點選了p元素，他在div和p元素上都觸碰了click事件，那麼先執行哪一個事件（事件處理順序）？

 事件捕獲

當你使用事件捕獲時，父級元素先觸發，子級元素後觸發，也就是說div先觸發，p後觸發。

事件冒泡

當你使用事件冒泡時，子級元素先觸發，父級元素後出發，也就是說p先觸發，div後觸發。

W3C模型

 在W3C模型中，任何事件發生，都是從頂級元素開始進行事件捕獲，直到事件到達事件源元素。然後，再從事件源元素往上進行事件冒泡，直到到達document。采用的方法是addeventListener函數，

ele.addEventListener('click',doSomething2,true)

true=捕獲

false=冒泡

傳統的綁定事件方式

ele.onclick = doSomething2

這種綁定方式，采用的是冒泡事件

IE浏覽器

IE隻支援事件冒泡，不支援事件捕獲，不支援addeventListener函數，她提供了另外一個函數attachevent。

ele.attachEvent("onclick", doSomething2);

文中有錯誤的地方希望指出，共同進步