JavaScript - Event-addEventListener (事件監聽)

事件 Event

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

w3school - event sample

常見事件類型

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

事件監聽 (addEventListener)

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

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

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

1
2
3
4
5
6
7
8
9
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點擊" />
1
2
3
4
5
6
7
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點擊" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 判斷是否具備運算符屬性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
1
2
3
4
5
6
7
8
9
10
11
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>
1
2
3
4
5
6
var el = document.querySelector("a");
el.addEventListener("click", function (e) {
e.preventDefault();
// 取消默認的行爲
// 取消點擊a連結後跳轉到指定頁面
});

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

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

語法

1
theTarget = event.target

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

1
2
3
4
5
<ul style="padding-top: 100px; border: 1px solid #333;">
<li>
<a href="#">1111</a>
</li>
</ul>
1
2
3
4
5
6
7
8
9
var el = document.querySelector(".header");
el.addEventListener(
"click",
function (e) {
console.log(e.target);
// target中還有各種語法,如nodeName是大寫的節點名稱
},
false
);

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

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :