當使用者對頁面做出什麼動作，javascript可以觸發這些事件。

事件綁定方法

行內綁定-寫在 HTML 標籤上

不推薦此寫法，程式碼會很髒，難維護。

<input type="button" class="btn" value="click" onclick="alert('hello!')">

寫在js裡

<input type="button" class="btn" value="click">

var btn = document.querySelector('.btn');
btn.onclick = function(){
  alert('hello!')
}

監聽

以addEventListener方式來綁定，推薦寫法

target.addEventListener(type, listener, options);

event:要監聽的事件
listener:事件觸發後執行
options:布林值，預設false，可省略。
true: 從最外層找到指定元素 -> 事件捕捉
false: 從指定元素往外找 -> 事件冒泡 (預設)

<input type="button" class="btn" value="click">
var el = document.querySelector('.btn');
                    //選擇事件, 帶入匿名function, false
el.addEventListener('click',function(){
  alert('hello!')
},false)

綁定事件差異

onclick

綁定多個onclick事件，只會出現最後一個oncllick，前面的onclick事件覆蓋掉，靈活性較低。

<input type="button" class="btn" value="click">
var btn = document.querySelector('.btn');
btn.onclick = function(){
	alert('1');
}
btn.onclick = function(){
	alert('2');
}

click

綁定多個click事件，會依序顯示

<input type="button" class="btn" value="click">

var el = document.querySelector('.btn');
el.addEventListener('click',function(){
  alert('1')
},false)
el.addEventListener('click',function(){
  alert('2')
},false)

Event Bubbling(事件冒泡) vs Event Capturing(事件捕捉)

Event Bubbling(事件冒泡)

子元素到父元素(由內而外)

<div class="box">
	<p class="text">123</p>
</div>

var elText = document.querySelector('.text');
elText.addEventListener('click', function(){
	console.log('text');
},false)

var elBody = document.querySelector('.box');
elBody.addEventListener('click', function(){
	console.log('box');
},false)

//text -> box

Event Capturing(事件捕捉)

父元素到子元素(由外而內)

<div class="box">
	<p class="text">123</p>
</div>

var elText = document.querySelector('.text');
elText.addEventListener('click', function(){
	console.log('text');
},true)

var elBody = document.querySelector('.box');
elBody.addEventListener('click', function(){
	console.log('box');
},ture)

//box -> text

stopPropagation - 中止冒泡

阻止事件冒泡到父元素

<div class="box">
	<p class="text">123</p>
</div>

var elText = document.querySelector('.text');
elText.addEventListener('click', function(e){
	e.stopPropagation(); 
	console.log('text');
},false)

var elBody = document.querySelector('.box');
elBody.addEventListener('click', function(){
	console.log('box');
},false)

//text -> box

preventDefault - 取消預設觸發行為

<a href="https://www.google.com/" class="link">default click</a>

var el = document.querySelector('.link');
el.addEventListener('click', function(e){
  e.preventDefault();
  console.log('default');
})

常見的事件名稱