從程式設計小白到全棧開發：瞭解事件機制

在上一篇文章中，我們初步瞭解了在HTML中處理使用者操作的知識，最主要的，就是如何對指定的DOM元素新增事件監聽以獲取使用者操作，並進行後續的處理。這裡所使用到的這種基於事件的處理方式，其本質是一種訊息傳遞機制，我們稱之為事件機制。

簡介

在事件機制中，有3樣最重要的東西：

• 事件生產者

• 事件物件

• 事件消費者

事件生產者可以產生一系列的事件物件，然後事件物件攜帶著必要的資訊，傳遞給事件消費者。

可以看出來，這是一種單向的訊息傳遞模型，事件訊息總是從生產者傳遞到消費者。那既然事件機制傳遞訊息是單向的，那麼如果兩個物件間要透過事件機制實現雙向通訊，是否可能呢？這太簡單了，把它們既作為生產者又作為消費者就行了：

這個理解起來應該不難吧？

接著呢，一個事件生產者所產生的事件，其實可以有多個消費者：

反之，一個事件消費者，也可以消費由多個生產者產生的事件：

好吧，我知道上面所描述的這些什麼生產者啊消費者的概念，對於一個初學者來說，聽起來還是有點迷糊，不太容易理解這套機制到底是怎樣工作的。那我們來整一個通俗易懂的例子吧：

我家小區門口有閘機，需要刷卡才能進入。如果有陌生來訪者，保安大哥就出現了，詢問來訪者去幾棟、幾零幾室、戶主是誰等資訊，答對了才登記並放行。

這個例子中，有著和我們上面講的概念一一對應的3個重要物件：

• 事件生產者：陌生來訪者

• 事件：無卡訪問

• 事件消費者：保安大哥

保安大哥的職責，就是時刻監視著是否有陌生來訪者產生了“無卡訪問”事件，一旦產生，保安大哥就會立刻啟動他應對這一事件的處理流程：詢問並核對資訊，答對後登記並放行。

這樣一講，是不是好理解多了？

事件冒泡

在講事件冒泡這個有點抽象的概念之前，我還是想以保安大哥來舉個例子。

雖然有陌生無卡訪問者的來訪，但是有些陌生無卡來訪者的情況比較特殊，而保安大哥的許可權還是比較小的，自己處理不了，這個時候，就需要通知他的上級----保安隊長來處理，如果保安隊長能處理，則他處理掉就完事兒了（或處理後同時上報給他的上級）；如果他也仍然處理不了，就需要再通知他的上級----小區物業主管來處理......

這種將事件層層向上級通報的機制，就被形象的稱作事件冒泡。

好，那麼這個概念對應到我們的HTML DOM程式設計中來，具體會是個什麼樣子呢？我們先前已經明白了一個HTML檔案對應一棵DOM樹，DOM節點之間也有父子層級關係，所以當在一個子節點上觸發一個事件，該事件也會隨著DOM樹的層級路徑，由子節點向父節點進行層層傳遞，請看以下示例：

    

        點我試試
    

    function buttonClickHandler(event) {        console.log('button clicked')
    }    function innerClickHandler(event) {        console.log('inner clicked')
    }    function outerClickHandler(event) {        console.log('outer clicked')
    }

以上程式碼中，我們建立了一個按鈕，這個按鈕擁有一個class為inner的

function buttonClickHandler(event) {    console.log('button clicked')
    event.stopPropagation()
}