Javascript 事件模型分為三種，分別是捕獲模型，目標(biāo)模型以及冒泡模型。捕獲模型意思是事件從最上層節(jié)點(diǎn)開始，逐層向下傳遞直到觸發(fā)事件所在的節(jié)點(diǎn)。下面讓我們看幾個(gè)具體的例子來更好地理解捕獲模型。

// HTML代碼
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
// Javascript代碼
var outer = document.getElementById('outer');
outer.addEventListener('click', function() {
console.log('outer clicked');
}, true); // 捕獲模型
var middle = document.getElementById('middle');
middle.addEventListener('click', function() {
console.log('middle clicked');
}, true);
var inner = document.getElementById('inner');
inner.addEventListener('click', function() {
console.log('inner clicked');
}, true);

在上面的代碼中，我們?cè)谌齻€(gè) div 元素上都添加了 click 事件，并且都使用捕獲模型。現(xiàn)在我們點(diǎn)擊 inner 元素，控制臺(tái)會(huì)先輸出 outer clicked， 然后輸出 middle clicked，最后才輸出 inner clicked。這就證明了事件是從最上層元素開始捕獲，直到最底層元素然后再進(jìn)行冒泡。

另外，由于現(xiàn)代瀏覽器性能已經(jīng)非常強(qiáng)大，冒泡模型已經(jīng)成為了默認(rèn)的事件模型，因此在實(shí)際開發(fā)中并不常使用捕獲模型。但如果確實(shí)需要使用到捕獲模型，可以將最后一個(gè)參數(shù)設(shè)置為 true。

// HTML代碼
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
// Javascript代碼
var outer = document.getElementById('outer');
outer.addEventListener('click', function() {
console.log('outer clicked');
});
var middle = document.getElementById('middle');
middle.addEventListener('click', function() {
console.log('middle clicked');
});
var inner = document.getElementById('inner');
inner.addEventListener('click', function() {
console.log('inner clicked');
}, true); // 捕獲模型

在上面的代碼中，我們只將最底層的 inner 元素的事件處理函數(shù)設(shè)置為捕獲模型，其他的元素的事件處理函數(shù)均為默認(rèn)的冒泡模型。現(xiàn)在我們點(diǎn)擊 inner 元素，控制臺(tái)會(huì)先輸出 inner clicked，然后再輸出 middle clicked，最后再輸出 outer clicked。這說明 inner 元素的事件處理函數(shù)先于其他元素的事件處理函數(shù)被觸發(fā)。

總之，捕獲模型是 Javascript 事件模型的一種，事件從最上層節(jié)點(diǎn)開始進(jìn)行捕獲，直到觸發(fā)事件所在的節(jié)點(diǎn)。在實(shí)際開發(fā)中，由于現(xiàn)代瀏覽器性能已經(jīng)非常強(qiáng)大，冒泡模型已經(jīng)成為了默認(rèn)的事件模型，因此在一般情況下是不需要使用捕獲模型的。但如果確實(shí)需要使用到捕獲模型，可以通過將事件處理函數(shù)的最后一個(gè)參數(shù)設(shè)置為 true 來啟用捕獲模型。