JavaScript - Event-addEventListener (事件監聽)

2019-02-04 PV:

事件 Event

Event 事件就是在瀏覽頁面的時候，根據使用者不同的行為，而觸發瀏覽器不同的動作。（例如使用者點擊、按下鍵盤等）

w3school - event sample

常見事件類型

click 點擊事件
mousedown 按下滑鼠
mouseup 放開滑鼠鍵
mouseenter 游標移入
mouseleave 游標移出

事件監聽（addEventListener)

JavaScript 是一種由「事件驅動」(Event-driven)的程式語言，在瀏覽器載入頁面的時候，要等到事件被觸發（例如使用者點擊、按下鍵盤等），才會進行相關程式的執行。

事件監聽的功能就是監聽事件有沒有被觸發。

以下是利用事件監聽器把一個事件綁定到元件上，並且指定事件啟動時需執行的函式，監聽元素 class=’btn’有沒有被點擊到的監聽案例：

var el = document.querySelector(".btn");
el.addEventListener(
  "click",
  function () {
    // 要綁定到節點的事件，呼叫的函式,指定的事件流程（冒泡或捕捉），一般設定為冒泡
    alert("hi");
  },
  false
);

事件綁定的差異

以點擊的案例來舉例，

傳統的 DOM 事件處理器

點擊可以透過 onclick = function(){…}達成，但是一個事件處理器只能一次綁定一個事件，在綁定多個事件的時候，只會執行最後一個事件

1 2	<input type="button" class="btnOn" value="on點擊" /> <input type="button" class="btnAdd" value="add點擊" />

var elOn = document.querySelector(".btnOn");
elOn.onclick = function () {
  alert("onclick-1");
};
elOn.onclick = function () {
  alert("onclick-2");
};

事件監聽器

可一次呼叫多個函式，但是舊版本的瀏覽器不支援

1	<input type="button" class="btnAdd" value="add點擊" />

var elAdd = document.querySelector(".btnAdd");
elAdd.addEventListener(
  "click",
  function () {
    alert("add-1");
  },
  false
);
elAdd.addEventListener(
  "click",
  function () {
    alert("add-2");
  },
  false
);

Event 物件

當事件發生時，event 物件可提供事件的相關資訊，和觸發事件的目標元件，包含一些和事件相關的有用資訊。
例如：

在 keypress 事件按下的按鍵是哪一個
事件的目標元件

event 物件會被傳遞到事件處理器中，當 event 物件被傳遞給函式的時候，通常使用的參數名稱是 e。在一個計算機的案例中，在 html 頁面建立一個有數字與運算符號的計算機，並且綁定多個元素，用 click 事件來執行 function，在小括號中帶入一個參數，之後觸發事件後就印出當下元素各種資訊。這個帶入參數的方式，在很多事件行為操作都需要利用到這個參數。

我們要判斷按下的是數字還是運算符號，利用 if 判斷是否具備運算符屬性

<div class="calculator__keys">
  <button class="key--operator" data-action="add">
    +
  </button>
  <button class="key--operator" data-action="subtract">
    -
  </button>
  <button class="key--operator" data-action="multiply">
    &times;
  </button>
  <button class="key--operator" data-action="divide">
    ÷
  </button>
  <button>7</button>
  <button>8</button>
</div>

const keys = document.querySelector('.calculator__keys');
keys.addEventListener('click',function (e){
if(e.target.matches('button')){
   const key = e.target;
if(!action){
 console.log(key)
}

}

}

結果如下圖：

變更預設行為 preventDefault()

preventDefault() 方法阻止元素的預設行為，例如點擊連結會前往另一個頁面。或者 form 表單裡面 submit 的按鈕，不想要點擊後馬上送出資料到後端，想要先進行基礎驗證的時候就可以使用這個方式。
以 <a href="http://w3school.com.cn/">W3School</a> 為例

1	<a href="http://w3school.com.cn/">W3School</a>

var el = document.querySelector("a");
el.addEventListener("click", function (e) {
  e.preventDefault();
  // 取消默認的行爲
  // 取消點擊a連結後跳轉到指定頁面
});

target - 指向最初觸發事件的 DOM 物件

event.target 屬性則是永遠指向觸發事件的 DOM 物件

語法

1	theTarget = event.target

想要知道滑鼠現在是點擊到哪一個位置的時候，就會用.target 的方式

<ul style="padding-top: 100px; border: 1px solid #333;">
  <li>
    <a href="#">1111</a>
  </li>
</ul>

var el = document.querySelector(".header");
el.addEventListener(
  "click",
  function (e) {
    console.log(e.target);
    // target中還有各種語法,如nodeName是大寫的節點名稱
  },
  false
);

在網頁上點擊過後，console.log 就會印出是 ul，li 或是 a。