Javascript- event介紹(上篇)

-

本篇文章僅用來提供個人學習紀錄使用，部分內容轉載自重新認識 JavaScript: Day 14 事件機制的原理，若有違規再請告知，謝謝。
這篇文章主要會介紹幾個主題：
  1. Event 是什麼?
  2. 常見三種事件註冊綁定方式
  3. event flow說明
JavaScript是一個事件驅動(Event-driven)的程式語言，當瀏覽器載入網頁開始讀取後，雖然會馬上讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。

舉個簡單例子：
設置在公司門外的電鈴，今天必須有人點擊電鈴，才會觸發電鈴作響，若沒有人點擊就不會發生任何事。

換做網頁來說明的話，事件就是瀏覽器會在使用者進入網頁後去判斷、監聽使用者行為。如：滑鼠滑過、網頁畫面大小拉動等等
  • 常見三種事件註冊綁定
1.on-event 處理器 (HTML 屬性)---舊式寫法  範例
>>可以透過 on+事件名 的屬性來註冊事件
<body>
<input type="button" value="點擊我" onclick="alert('hi')" class="btn">
<script src="js/all.js"></script>
</body>
說明：
1.直接在html上 載入onclick事件
缺點：
1.較不推薦使用，因為使用 onclick 時，該元素只能綁定一個事件
2.此外基於程式碼的使用性與維護性也不建議使用。詳情可參考非侵入式JavaScript

2.on-event 處理器 (非 HTML 屬性)   程式碼連結
像是 window 或 document 此類沒有實體元素的情況，我們一樣可以利用 DOM API 提供的「on-event 處理器」(on-event handler) 來處理事件：
window.onload = function(){
  document.write("Hello world!");
};
實體元素也可透過 DOM API 取得 DOM 物件後，再透過 on-event 處理器來處理事件：
var el = document.querySelector(".btn");
el.onclick = function(e) {
console.log(e);
// alert("hello");
};
 

 說明：
1.function( )中的參數名稱可以隨意命名，可以叫做 e、event、任何你好懂得語意都可以
當點擊button時，console.log會出現下面資訊，瀏覽器會記錄滑鼠點擊位置等資訊
補充：
若想解除事件的話，則重新指定 on-event hendler 為 null 即可：
el.onclick = null;

3.addEventListener監聽事件  範例
addEventListener() 內有三個參數，分別是「事件名稱」、「事件的處理器」(Event Handler)，以及「捕獲」或「冒泡」的機制切換。
var el = document.querySelector(".btn");
// 帶入三個參數 第一個選擇事件 第二個代入匿名function 第三個true或false
el.addEventListener("click",function(e) {
alert("hello");
console.log(e);
},false );
說明：
2.函式討論 匿名函式寫法 連結
3.若不寫false預設狀態也是false喔!
補充：
1.何謂匿名函式：
// = 後面的 function 「沒有名字」就叫匿名函式
var test = function(num){
   return num*num
}
2.函式常見三種寫法 連結
3.onclick 跟 addEvent比較  範例
結論：onclick事件不能同時綁定兩個事件 addEvent可以
4.若要移除事件可以透過removeEventListener( )來取消
>>需要注意的是，由於 addEventListener() 可以同時針對某個事件綁定多個 handler，所以透過 removeEventListener() 解除事件的時候，第二個參數的 handler 必須要與先前在 addEventListener() 綁定的 handler 是同一個「實體」。寫法如下


補充：addEventListener 第三個參數布林值說明 範例
// false -從指定元素往外找，找到所有有監聽的元素(Event Bubbling)
// true -從最外面找到指定元素(Event Capturing)
接著我們來看個程式碼吧~
// 點擊box
var el = document.querySelector(".box");
el.addEventListener("click",function() {
alert("box");
console.log("box");
},false);

// 點擊body
var elBody = document.querySelector(".body");
elBody.addEventListener("click",function() {
alert("body");
console.log("body");
},false);
1.當我們點擊box時候，會依序跳出box、body
2. 當我們點擊 body 時候，只會跳出body
這時候你可能會對第一點疑惑，我明明是滑鼠點擊box的click事件，不是body的click事件？為什麼body也會被找到？
A：想一下她是在哪個容器裡面？當然是 body 裡面的 box，所以自然 body 也跟著被點擊到，false 是由內往外找，所以才會從 box> body

接著反過來，我們把false全部改為true結果會是怎樣呢?
// 點擊box
var el = document.querySelector(".box");
el.addEventListener("click",function() {
alert("box");
console.log("box");
},true);

// 點擊body
var elBody = document.querySelector(".body");
elBody.addEventListener("click",function() {
alert("body");
console.log("body");
},true);
1.點擊box時，依序顯示body、box
2.點擊body時，顯示body

小結：若監聽事件數量多的話，true/false組合出來的結果會非常多樣。因此我們直接來看結論吧 文章
1. 先捕獲，再冒泡
2. 當事件傳到 target 本身，沒有分捕獲跟冒泡

補充：強練建議可以看這篇文章介紹Event Flow 連結
Q：既然事件傳遞順序有兩種機制，那我怎麼知道事件是依賴哪種機制執行的？
答案是：兩種都會執行。


圖片來源: W3C, DOM event flow

留言

張貼留言