# 4. Event Bubbling、Event Capturing 差異 - 了解監聽事件語法的 true、false 的差異是什麼： 1. 先建立事件小主角 - .box、.body: ``` // HTML: <body class="body"> <div class="box"></div> </body> ---------------------------- // CSS: .box { background: blue; width: 250px; height: 250px; } ``` ### 針對 box 與 body 個別都綁定一clcik事件： 2. JavaScript: ``` // box var elbox = document.querySelector('.box'); elbox.addEventListener('click', function (e) { alert('box'); console.log('box'); }, false) // body var elbody = document.querySelector('.body'); elbody.addEventListener('click', function (e) { alert('body'); console.log('body'); }, false) ``` ### 監聽事件若預設- false 的話會顯示： - 點擊 box 顯示結果： - 會發現，雖然我們點下的是 box，但是 body 也會有反應 ``` // box // body ``` ### 監聽事件若預設- true 的話會顯示： - 點擊 box 顯示結果： - 會發現，雖然我們點下的是 box，但是這次不是先顯示 box 而是先抓住 body，再來才會顯示box ``` // body // box ``` ### 解釋事件監聽 false、true 的差異性： 1. false - Event Bubbling 又稱做**冒泡事件**： 意思是說，今天當我點擊當下的元素時，同時它也會逐步向外去尋找你的最外層元素，也就是範例的 body 本身，**從指定元素往外找** 2. true - Event Capturing 又稱作**捕捉事件**： 與冒泡事件不同，這邊則是反過來執行：當我點擊當下元件，也就是 box 這邊則會從最外圍也就是 - body，逐步的來找到當下這個 box，類似從一個大草原來去捕捉一個小動物一樣：） ###### tags: `JavaScript - event 事件`