Javascript 中的 event，是指事件。事件可以是用戶與界面交互，也可以是瀏覽器發(fā)生某些特定的操作，如下載完成，頁面加載等。在Javascript中，我們可以使用捕獲、冒泡、委托這些方式來監(jiān)聽和處理事件。

捕獲事件的方式就是先處理最外層元素的事件，再逐漸往里層元素處理事件。比如，假設(shè)我們有一個(gè)頁面，它包含一個(gè)按鈕和一個(gè)表單，這兩個(gè)元素分別綁定了點(diǎn)擊事件，那么當(dāng)點(diǎn)擊按鈕時(shí)，先觸發(fā)document的點(diǎn)擊事件，接著是點(diǎn)擊按鈕的事件，最后是表單的點(diǎn)擊事件。這就是捕獲事件的過程。

document.addEventListener('click', function () {
console.log('document clicked');
}, true);
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function () {
console.log('button clicked');
}, true);
const form = document.getElementById('myForm');
form.addEventListener('click', function () {
console.log('form clicked');
}, true);

代碼中addEventListener監(jiān)聽函數(shù)的第三個(gè)參數(shù)取true，表示使用捕獲事件。如果我們修改為false，表示使用冒泡事件。也就是說，這個(gè)時(shí)候點(diǎn)擊順序就會(huì)變成表單 ->按鈕 ->document，因?yàn)槭录奶幚韽淖铐攲釉亻_始往內(nèi)部逐層處理。

document.addEventListener('click', function () {
console.log('document clicked');
}, false);
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function () {
console.log('button clicked');
}, false);
const form = document.getElementById('myForm');
form.addEventListener('click', function () {
console.log('form clicked');
}, false);

另外一種常用的捕獲事件的方式，就是事件委托。所謂的事件委托，是指將事件委托給父節(jié)點(diǎn)或者更外層的元素來處理。這種方式的好處在于，可以減少事件處理函數(shù)的數(shù)量，也可以處理一些動(dòng)態(tài)生成的元素事件。

const list = document.getElementById('myList');
list.addEventListener('click', function (event) {
if (event.target.nodeName === 'LI') {
console.log('li clicked');
}
});

上面的代碼，使用事件委托監(jiān)聽了一個(gè)列表，當(dāng)列表中的 li 元素被點(diǎn)擊時(shí)會(huì)觸發(fā)事件處理函數(shù)。事件處理函數(shù)中，使用了事件對象的target屬性表示當(dāng)前被點(diǎn)擊的元素。如果被點(diǎn)擊元素是li，則輸出日志。

最后需要注意的是，事件捕獲過程并不是所有瀏覽器都支持，如果希望支持所有瀏覽器，需要將捕獲事件和冒泡事件都監(jiān)聽一遍。使用Javascript事件庫，比如jQuery等，可以方便地實(shí)現(xiàn)事件委托和跨瀏覽器兼容。