---
title: 'JS 入門 - Event 事件 (下)'
tags: JS, Javascript, Event
description: 2021/01/25
---
JS 入門 -- Event 事件 (下)
===
內容承接 Event 事件 (上)
https://hackmd.io/@peggyted0129/Byv79ao1O
---
## 了解目前所在元素的位置 — e.target
* ==event.target 屬性則是永遠指向觸發事件的 DOM 物件。==
* 如果我們的網頁上面有好幾層元素，要知道自己==當下觸發的到底是哪個元素==，可以用事件監聽 + 函式內執行 e.target 來得知。
* 更精確地確認點擊元素 : 追蹤**節點名稱nodeName**
```
<div class="header">
<ul style="padding-top:100px;border: 1px solid #000">
<li>
<a href="#">123</a>
</li>
</ul>
</div>
```
```typescript
var el = document.querySelector('.header');
el.addEventListener('click', function(e){
console.log(e.target); // <a href="#">123</a>
console.log(e.target.nodeName); // 節點名稱 UL、LI、A
};
```
## 表單內容變更時觸發 — change
* 此事件僅限用於 元素、 和 元素，當元素的值改變時，change 事件就會觸發。
* 對於下拉選擇框、複選框和單選按鈕，當使用者用游標作出選擇，該事件立即觸發
* 思考 [範例程式碼](https://codepen.io/Peggyted0129/pen/WNGqEqX)
1. 點擊 <select> 時，撈出區域資料做比對
→ 對下拉式選單 <select> 做監聽，當我變更資料時，會觸發change事件
2. 當撈出苓雅區，下方會出現農夫名字 → 要先組 li 字串，帶入HTML裡 → 會使用for迴圈，在array撈出各種資料 → 透過if把資料篩出來 → 把資料帶入HTML
3. 利用e.target選取 <select> 的元素位置，再用e.target.value取出元素的值
## 按下鍵盤的觸發事件 — keyCode / keydown
按下鍵盤的那個剎那，就可以取得對應的鍵盤代碼，也就是所謂的 keyCode。
**1. document.body 其實指的就是回傳HTML的<body>這個節點，也就是整個網頁內容的意思。**
2. JS程式碼可以理解為 : 監聽整個網頁內容，當在這個網頁時有按下鍵(keydown 事件)，就執行 goRocket 這個函式。
```typescript
var body = document.body;
function goRocket(e) {
console.log(e.keyCode); // 查鍵盤代碼， EX: 49、50、51
}
// 偵測按下按鍵的行為
body.addEventListener('keydown', goRocket, false);
```
按數字 1（代碼 = 49）時，發射 1 號火箭（將 CSS bottom 屬性從 0 變成 2000）；按數字 2 跟 3 時同理類推。
```typescript
var body = document.body;
function goRocket(e) {
switch (e.keyCode) {
case 49:
document.querySelector(".rocket-1").style.bottom = "2000px";
break;
case 50:
document.querySelector(".rocket-2").style.bottom = "101%";
break;
case 51:
document.querySelector(".rocket-3").style.bottom = "101%";
break;
}
}
body.addEventListener('keydown', goRocket, false);
```
:bulb: [範例程式碼](https://codepen.io/PeiHan/pen/abmGYdV?editors=1010)
## 離開焦點時觸發 — blur
1. 綁定 blur 事件的效果是，當元素失去焦點時會觸發特定行為。
2. 可以用在表單的防呆上（提醒使用者沒有填到的欄位必填等等）。
:bulb: [範例程式碼](https://codepen.io/Peggyted0129/pen/OJReZEX?editors=1010)
## 當游標滑到特定元素時觸發 — mousemove
:bulb: [範例程式碼](https://jsbin.com/venuqoreqi/edit?html,css,js,console,output)
```
<style>
.box {
width: 100px;
height: 100px;
background: #000;
}
</style>
<body>
<div class="box"></div>
</body>
```
```typescript
var el = document.querySelector('.box');
el.addEventListener('mousemove', function(){
alert('滑鼠滑過去了');
}, false);
```
## 網頁座標 — screen、page、client
* 如何偵測目前滑鼠的座標
* screen : 「螢幕解析度」的 X 軸、Y 軸座標
* page : 代表「網頁」的 X 軸、Y 軸座標
* client : 瀏覽器「視窗」的 X 軸、Y 軸座標
:bulb: [範例程式碼](https://codepen.io/Peggyted0129/pen/VwKJdKa)
## 事件監聽優化篇 — 從父元素來監聽子元素內容
```
<ul class="list">
<h2>HELLO</h2>
<li>查理</li>
<li>卡斯伯</li>
<a href="#">a連結</a>
</ul>
```
使用 return 中斷資料，後面程式碼不會執行、直接結束。
```typescript
var list = document.querySelector('.list');
list.addEventListener('click', checkName, false);
function checkName(e){
// 如果不是選取LI就直接結束
if(e.target.nodeName !== "LI"){ return }
//取出LI節點內的文字
console.log(e.target.textContent); // 查理、卡斯伯
}
```
<style>
.red {
color: red;
}
</style>
## :memo: 筆記
:::info
回傳<span class="red">**值**</span>用 e.target.value
回傳<span class="red">**文字**</span>用 e.target.textContent
:::
Sign in with Wallet
Connect another wallet