JavaScript－event介紹(中)

上一集我們簡單介紹了何謂事件、常見事件綁定方式、事件流程這三個部分。若對於這些內容不清楚，歡迎到Javascript- event介紹(上篇) 了解。
今天這篇文章主要會介紹以下幾個部分

1. 阻擋預設行為（event.preventDefault）
2. 阻擋事件冒泡（event.stopPropagation）
3. event.target 
4. 事件指派（event delegate）

---

• stopPropagation介紹  練習連結

目的：阻止當前事件繼續進行捕捉（capturing）及冒泡（bubbling）階段的傳遞。 

使用上記得要掛在子元素上，避免事件冒泡！

天然範例：

1.<label> 與 <input type="checkbox">使用時  練習連結（引用Kuro大大案例）

2.同一組DOM元素（父子元素）綁定相同事件時候，如下圖範例

// 點擊box
var el = document.querySelector(".box");
el.addEventListener("click",function(e) {
    e.stopPropagation();
    alert("box");
    console.log("box");
  },false);

// 點擊body
var elBody = document.querySelector(".body");
elBody.addEventListener("click",function() {
    alert("body");
    console.log("body");
},false);

說明：

1.function一定要寫參數如e、event，否則js不知道誰要停止

補充說明：

checkbox實際案例，修正label觸發兩次事件錯誤行為   連結

注意， stopPropagation() 不是掛在 label ，而是要放在 checkbox 上才有效！

• 取消默認行為  練習連結

一般有幾個用途

1.點擊連結時不想要轉跳網頁，目的用來綁定事件

2.傳送表單時，可以先透過js先查詢表單有無錯誤，再利用post傳送 

// 點擊box
var el = document.querySelector(".box");
el.addEventListener("click",function(e) {
    e.stopPropagation();
    alert("box");
    console.log("box");
  },false);


// 點擊body
var elBody = document.querySelector(".body");
elBody.addEventListener("click",function() {
    alert("body");
    console.log("body");
},false);

第二種寫法：

在html結構上使用onclick="return false"

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

• event.target 範例

目的：指向觸發事件的 DOM 物件

var el = document.querySelector(".header");

el.addEventListener(

"click",function(e) {

console.log(e.target.nodeName);},

false

);

說明：

1.加上.nodeName 會顯示 "UL"/"LI"/"A" 上面範例說明

補充：event.currentTarget 比較 連結

event.currentTarget 屬性總會指向目前於冒泡或捕捉階段正在處理該事件之事件處理器所註冊的 DOM 物件，而 event.target 屬性則是永遠指向觸發事件的 DOM 物件。

• 事件指派 Event Delegation（利用父元素來監聽子元素） 正確示範  錯誤示範

// 點擊li之後會顯示li內容

var el = document.querySelector(".list");

function show(e) {

if (e.target.nodeName !== "LI") {return};

console.log(e.target.textContent);

}

el.addEventListener("click", show, false);

說明：

因為使用nodeName，所以html中的ul、li都轉成大寫了。

且點擊非li節點後，會回傳空值 return{ }

---

參考資料
重新認識 JavaScript: Day 15 隱藏在 "事件" 之中的秘密