5.1 事件(Event)簡介

什麼是事件(Event)？

使用者與網頁有互動操作。例：

• 開啟網頁

• 滑鼠滑過元素

• 點擊元素

• 一般文字框的焦點輸入(focus)

• 打字

• 送出表單資料

• 視窗拖曳改變大小

• ……很多……

如何綁定事件

1. 找到要綁定的元素

2. 什麼樣的事件綁定，例：click、dblclick。

3. 事件觸發後，要執行什麼程式。通常會是一個帶有「事件物件」(Event Object)的函式。

例：

element.addEventListener("click", function(e){
  // code
});

事件觸發後，除了自訂邏輯之外，進一步可以執行的程式：

• 停止預設行為(e.preventDefault())

• 停止事件冒泡(e.stopPropagation())

如何解除事件的綁定

function my_func(e){
  // code
}

element.addEventListener("click", my_func);

element.removeEventListener("click", my_func);