我們就接著昨天繼續講解什麼是阻止預設以及如何防止冒泡行為發生!

event.preventDefault()

主要是阻止節點預設行為發生，什麼意思呢?

<a href="http://google.com" class="btn">click</a>

document.querySelector('.btn').addEventListener('click',function(event){
  console.log('hello')
})

你會發現不會執行console.log()而且是直接連到google的網頁，是因為我們沒有阻止<a>的預設行為所以如果要正確執行console.log()且不跳頁，一定要preventDefault()

document.querySelector('.btn').addEventListener('click',function(event){
  event.preventDefault()
  console.log('hello')
})

event.stopPropagation()

意思為阻止冒泡行為發生，我們先來看看例子

<div class="one" style="width:100px;height:100px;background-color:red;">
  <div class="two" style="width:70px;height:70px;background-color:green;">
    <div class="three" style="width:30px;height:30px;background-color:yellow;">	       </div>
  </div>
</div>

var one = document.querySelector('.one')
var two = document.querySelector('.two')
var three = document.querySelector('.three')

one.addEventListener('click',function(){
  console.log('one')
})

two.addEventListener('click',function(){
  console.log('two')
})

three.addEventListener('click',function(){
  console.log('three')
})

我們會看到有三個div，如果我們點擊最裡面那層黃色的區塊，你會看到console顯示

還記得之前說的嗎?addEventListener預設是走冒泡行為，所以點擊到最裡面的div因冒泡的緣故會逐漸往上傳遞，導致外層的div如果也有事件的話也會被觸發。

那如果不要點擊到外層的div的話就可以使用event.stopPropagation()來阻止冒泡行為發生

one.addEventListener('click',function(){
  console.log('one')
})

two.addEventListener('click',function(){
  console.log('two')
})

three.addEventListener('click',function(event){
  event.stopPropagation()
  console.log('three')
})

會看到console顯示只剩下我們點擊最裡面的那個區塊!

今天就講解到這邊，明天再繼續為大家講解addEventListener其他事件!大家明天見!