JavaScript 中的事件（Event）機制十分重要，它負責(zé)完成頁面交互的過程，包括點擊、拖拽、鍵盤輸入、窗口大小變化等等。有時我們希望在某事件觸發(fā)時，不讓默認的行為或者冒泡過程發(fā)生。那么如何來阻止事件的默認和冒泡行為呢？本文將詳細說明 JavaScript 中自帶的事件機制，以及如何使用 Event 對象來阻止事件。

以點擊鏈接為例，當我們鼠標點擊某個鏈接時，瀏覽器默認會打開鏈接所指的頁面。這時候如果我們希望用戶點擊鏈接后，留在當前頁面，可以使用 JavaScript 中的事件阻止方法來實現(xiàn)。如下代碼：

const link = document.querySelector('a')
link.addEventListener('click', function(event){
event.preventDefault()
})

上面的代碼中，我們首先從 DOM 中獲取到一個鏈接元素，并為其添加了一個 click 事件的監(jiān)聽器。在事件監(jiān)聽器中，我們訪問到了事件對象 event，并通過 event.preventDefault() 方法，像阻止默認行為一樣阻止了鏈接的跳轉(zhuǎn)。

另一個很常見的例子就是阻止事件的冒泡。假設(shè)頁面上有一個按鈕和一個嵌套的 div 元素，當我們點擊 div 時，事件會一層一層向上冒泡，直到 root 元素。這個過程對于單個按鈕或者嵌在其它元素內(nèi)的按鈕來說，是沒有價值的，因為我們只關(guān)心按鈕自身的點擊事件，而不希望冒泡到其它元素。

const button = document.querySelector('button')
const div = document.querySelector('div')
button.addEventListener('click', function(event){
event.stopPropagation()
})
div.addEventListener('click', function(event){
console.log('Clicked div')
})

在上述代碼中，我們?yōu)榘粹o添加了一個點擊事件監(jiān)聽器，并在事件處理函數(shù)中調(diào)用了 event.stopPropagation() 方法，以便停止事件繼續(xù)向上層元素冒泡。這樣，即使 div 元素也有一個事件監(jiān)聽器，也不會被觸發(fā)。

以上就是 JavaScript 事件阻止的相關(guān)內(nèi)容，我們可以使用阻止默認和阻止冒泡的方法來定制化頁面的事件響應(yīng)機制，從而實現(xiàn)更加豐富的用戶交互體驗。需要注意的是，我們只應(yīng)該在必要的時候使用這些阻止方法，避免濫用導(dǎo)致頁面反應(yīng)不靈敏或者交互體驗差。