wordpress_blog

This is a dynamic to static website.

聯絡我

JavaScript 複習06

gee.hsu

Event 事件 – 讓您的網頁具有互動效果

什麼是 event?

// event 事件
// 點擊事件: 選單下拉、關閉按鈕
// 滾輪事件: 滑鼠滾動
// 可以透過 DOM 綁定 HTML 元素，並註冊監聽事件進行

addEventListener 註冊事件監聽教學

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <input type="button" value="點擊" class="btn">
  <h2>標題</h2>

  <script src="all.js"></script>
</body>
</html>
// all.js
const btn = document.querySelector(".btn");
const title = document.querySelector("h2");

// 事件監聽
btn.addEventListener("click", function(e) {
  title.textContent = "按鈕已經被點擊";
});

如何觀看 DOM 有註冊事件監聽

使用 Chrome Elements > Event listeners 查看

在點擊按鈕上按滑鼠右鍵檢查，找到 Elements 面板裡面的 Event Listeners(事件監聽者)，可以查看 DOM 有沒有註冊事件監聽。

可以透過 Chrome 開發者工具內的 Event Listeners 去觀看是否註冊事件監聽成功。

來寫一個加法器吧!

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <input type="button" value="點擊" class="btn">
  <h2>0</h2>

  <script src="all.js"></script>
</body>
</html>
// all.js
const btn = document.querySelector(".btn");
const title = document.querySelector("h2");
let count = 0;

btn.addEventListener("click", function(e) {
  count += 1;
  title.textContent = count;
})

event 物件 – 告訴你當下元素資訊

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <input type="button" value="點擊" class="btn">

  <script src="all.js"></script>
</body>
</html>
// all.js
// event 物件
// 會回傳一個物件，會把你事件的狀態捕捉、快照
// e 是 event 的縮寫
// function() 函式裡面的參數可以自行命名各種名稱

const btn = document.querySelector(".btn");

btn.addEventListener("click", function(e) {
  console.log(e);  // PointerEvent{}
  console.log(e.clientX);  // 28
})

DOM 複習 – 透過 nodeName 瞭解目前 DOM 的 HTML 位置

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <input type="button" value="點擊" class="btn">

  <script src="all.js"></script>
</body>
</html>
// all.js
const btn = document.querySelector(".btn");

console.log(btn.nodeName);  // INPUT

e.target – 了解目前所在元素位置

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  <input type="button" value="點擊" class="btn">
  <ul class="list">
    <li>列表名稱一</li>
    <li>
      列表名稱二
      <input type="button" class="listbtn" value="按鈕">
    </li>
  </ul>

  <script src="all.js"></script>
</body>
</html>
// all.js
// e.target 可以知道目前點擊到 DOM 位置
const btn = document.querySelector(".btn");

btn.addEventListener("click", function(e) {
  console.log(e.target);
})

const list = document.querySelector(".list");

list.addEventListener("click", function(e) {
  console.log(e.target);
})

e.target 搭配 nodeName 節點，抓到你預期要做的事情

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>
  
  <ul class="list">
    <li>列表名稱一</li>
    <li>
      列表名稱二
      <input type="button" class="listbtn" value="按鈕">
    </li>
  </ul>

  <script src="all.js"></script>
</body>
</html>
// all.js
// if(我現在點擊到的是按鈕) {}
const list = document.querySelector(".list");

list.addEventListener("click", function(e) {
  // console.log(e.target.nodeName);
  
  if(e.target.nodeName == "INPUT") {
    console.log("你目前點到按鈕了!");
  }
})

preventDefault – 取消預設觸發行為

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>複習 Review JS</h1>

  <!-- 取消 HTML 標籤默認行為 -->
  <a href="https://www.google.com.tw">Google 連結</a>
  <h2></h2>

  <script src="all.js"></script>
</body>
</html>
// all.js
// preventDefault - 取消預設觸發行為
// 例如: <a> #, url、<input> submit

const myLink = document.querySelector("a");
const myText = document.querySelector("h2");

myLink.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("有被點擊到");
  myText.textContent = "顯示我的網頁內容";
})