設定事件處理器特性

大部分的事件會以on為開頭且全小寫(onclick/onchange/onload/onmouseover/...)。

window.onload = function() {
    var element= document.getElementById('form-input-id');
    
    element.onsumbit = function() {
        // ...
    }
}

設定事件處理器屬性

document事件可被設定在Html上的屬性。

<button onclick="alert('Alert');">click</button>

註冊事件處理器

在Window、Document和所有的Element都有定義addEventListener()方法，

• addEventListener()有三個引數:
  • 第一個引數是要註冊事件處理器的事件類型(不需on前綴)
  • 第二個引數指定事件發生時，要觸發的function
  • 第三個引數是boolean(可省略)，通常會視false，若設為true則function會被註冊為捕捉式(capturing)事件處理器。

下面程式碼兩種註冊click事件方式，兩者差異在於

var el= document.getElementId('my-id');
el.onclick = function(){
    console.log('onclick~');
}

el.addEventListener('click',function(){
console.log('event listener');
},false);

// 移除event listerner
// +-----------------+
// | 下列的方式無效    |
// | 匿名函數無法移除  |  
// +-----------------+
el.removeEventListener('click',function(){
console.log('event listener');
},false)

// +-----------------+
// | 下列的方式有效    |
// |  使用具名函數     |  
// +-----------------+

functino handleClick(){
    console.log('click');
}
el.addEventListener('click',handleClick,false);

el.removeEventListener('click',handleClick,false);

事件傳播 bubble capture

在document元素上觸發的事件大部分都會bubble效果，但focus/blur/scroll事件除外。

事件cature到bubble共有三個階段

• 第一階段: capturing phase ( eventPhase = 1 )
• 第二階段: target phase ( eventPhase = 2 )
• 第三階段: bubbling phase ( eventPhase = 3 )
  以下例子說明
• HTML

<table id="table_id">
    <tbody>
        <tr>
            <td id="A_id">A</td>
        </tr>
        <tr>
            <td>B</td>
        </tr>
    </tbody>    
</table>

• JavaScript
  將<table id="table_id">和<td id="A_id">加入addEventListener事件，來觀察bubble和capture。
  addEventListener的第三個引數true表示在capture階段觸發。

const getTableTag= document.getElementById('table_id');
const getA_td = document.getElementById('A_id');

// +--------------------------------+
// | table_id 在capturing phase觸發 |
// +--------------------------------+
getTableTag.addEventListener('click',function(event){
    console.log('table_id capturing:'+event.eventPhase );
},true);

// +--------------------------------+
// | table_id 在bubbling phase觸發  |
// +--------------------------------+
getTableTag.addEventListener('click',function(event){
    console.log('table_id bubbling:'+event.eventPhase );
},false);


// +--------------------------------+
// | A_id 在capturing phase觸發      |
// +--------------------------------+
getA_td.addEventListener('click',function(event){
    console.log('A_id capturing:'+event.eventPhase );
},true)


// +--------------------------------+
// | A_id 在bubbling phase觸發       |
// +--------------------------------+
getA_td.addEventListener('click',function(event){
    console.log('A_id bubbling:'+event.eventPhase );
},false)

• 當點擊<td>A</td>時
  • 紅色箭頭: capturing phase
  • 綠色打勾: target phase
  • 藍色箭頭: bubbling phase

探討兩個情況

• 點選<td id="A_id">A</td>

1. 在capture階段會一路從window --> document --> ... --> <table id="table_id">此時因為有註冊addEventListener在capture階段所以觸發了table_id capturing --> ...

2. 然後傳遞到了target的元素，addEventListener不管是capture或bubble階段都會觸發且都是 event.eventPhase = 2 的階段

3. 在bubble階段再一路從target元素 --> ... --> <table id="table_id">此時因為有註冊addEventListener在bubble階段所以觸發了table_id bubbling --> ... -->window

   可以由下圖的console知道capture與bubble順序
   

• 點選<table id="table_id">

1. 在capture階段會一路從window --> document --> ... --> <table id="table_id"> target元素所以capture或bubble階段都會觸發且event.eventPhase = 2的階段