什么是事件流？

事件流描述的是從頁(yè)面中接受事件的順序，但有意思的是，微軟（IE）和網(wǎng)景（Netscape）開發(fā)團(tuán)隊(duì)居然提出了兩個(gè)截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕獲流(event capturing)。

一、什么事DOM 0級(jí)處理事件？

舉個(gè)例子，你直接在DOM 標(biāo)簽上綁定的onClick事件，

<button? onClick={this.func}? id='btn'/>

或者通過document.getElemmentByXX('btn')此類方式獲取到

let btn =?document.getElemmentById('btn')

btn.click = function() { console.log('xxxxx')?}

如上兩種方式，通過給?dom對(duì)象的屬性?賦值函數(shù)的，稱為DOM 0級(jí)事件處理。

DOM 0級(jí)事件規(guī)定的事件流包含3個(gè)階段，事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。首先發(fā)生的事件捕獲為截獲事件提供機(jī)會(huì)，然后是實(shí)際的目標(biāo)接收事件，最后一個(gè)階段是事件冒泡階段，可以在這個(gè)階段對(duì)事件做出響應(yīng)。

二、什么事DOM 2級(jí)處理事件？

DOM 2級(jí)事件定義了兩方法：用于處理添加事件和刪除事件的操作：添加事件?addEventListener()?刪除事件?removeEventListener()，通過如下方式添加事件處理的稱為DOM 2級(jí)處理事件。

let btn =?document.getElemmentById('btn')

function showFunc?() {?console.log('xxxxx')?}

btn.addEventListener(click, showFunc, false)?

如上，通過addEventListener()?添加事件的方法稱為DOM 2級(jí)處理事件，需要注意的是，DOM2級(jí)處理事件沒有事件捕獲階段、冒泡階段等。

三、在項(xiàng)目中是否遇到過需要使用e.stopPropagation去阻止冒泡的情況？為什么？

搞清楚DOM 0級(jí)處理事件和DOM 2級(jí)處理事件的區(qū)別，就清楚為什么有時(shí)候需要在項(xiàng)目中使用e.stopPropagation操作了。當(dāng)你給父元素和子元素同時(shí)添加了onClick事件的時(shí)候，如果是通過DOM 0級(jí)處理事件的方式去添加，就一定會(huì)出現(xiàn)冒泡階段同時(shí)觸發(fā)兩個(gè)元素的onClick操作，因此，你就需要在子元素事件中添加e.stopPropagation()方法去組織冒泡。