Day20 Javascript 事件監聽

2022 iThome 鐵人賽

DAY 20

Modern Web

Javascripts惡補小教室系列第 20 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-10-05 23:28:58

1654 瀏覽

分享至

監聽方法

今天要來介紹監聽，監聽是甚麼呢? 其實這樣跟事件一起說起，事件就是指當我們按下按鈕，或是輸入框輸入文字時，或是瀏覽器加載完成，滑鼠移入、移出、雙擊，這些都是事件，那事件監聽的行為就很好理解了，我們去持續關注這些發生的事件，就是監聽! 那實際上要使用甚麼方法，就是我們接下來的主角。

addEventListener() 方法
addEventListener() 方法為替我們指定的元素及指定事件做處理，一個元素我們可以擁有多種事件，就算是相同的類型，兩個'click'事件也是可行的。而不僅僅包含HTML元素，也能透過向全局window新增事件來達到我們所需的效果，任何的DOM對象都可以添加事件，那有新增一訂有刪除，removeEventListener() 就是我們刪除事件監聽的方法。

寫法:

element.addEventListener(event, function, useCapture);

element是我們所指定的元素，例如id="demo"的p標籤，還記得前面的文章嗎，將會是document.getElementById("demo")。
addEventListener()監聽方法。
event參數，表示事件的類型。(click、mousedown)。
function是當前事件監聽所要執行的函數。
useCapture參數是boolean型態，表示事件冒泡或是事件捕獲，此參數可選。

接下來我們來看實際範例。

範例:

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">按鈕</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello jason!");
});
</script>

</body>
</html>

當按鈕點下時，跳出警告框，內容為"Hello jason!"。比照前面的寫法是不是很簡單呢?
前面提到了事件監聽，那一個事件想要可以做兩個函數行不行，答案是可以的，讓我們來看看範例。

相同事件新增多個事件監聽函數
範例:

<!DOCTYPE html>
<html>
<body>


<button id="myBtn">按鈕</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", oneFunction);
x.addEventListener("click", twoFunction);

function oneFunction() {
  alert ("Hello World!");
}

function twoFunction() {
  alert ("hi dina！");
}
</script>

</body>
</html>

結果會是"Hello World!"及"hi dina！"都會跳出警告框，所以可以在同個監聽事件裡，加入不只一個函數方法。當然相同元素不同類型的事件，也都能執行想要的函數方法。

範例:

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">按鈕</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", oneFunction);
x.addEventListener("click", twoFunction);
x.addEventListener("mouseout", threeFunction);

function oneFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function twoFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function threeFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

滑鼠滑過跟滑出，還有按下按鈕時分別執行各自所需的函數!將結果給印出來。

全局window對象新增事件
對全局window對象新增事件處理，像是我們調整網頁頁面大小時，可以觸發事件，就能透過監聽window去作所需的函數。

範例:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

當我們在調整網頁窗口大小時，p的HTML內容不停地取亂數印出。

事件冒泡與獲取
這兩個名詞在一開始有提到，但是聽到冒泡整個人都冒泡了，其實想像一下，這就是我們處理事件的順序，冒泡就是從內而外，獲取則是從外而內，我們可以透過調整useCapture參數去決定我們要哪種執行方式。

removeEventListener() 方法
今天要刪除監聽事件，或是監聽做完所需的函數，就不要再監聽時，removeEventListener()就派上用場了!

寫法:

element.removeEventListener("mousemove", myFunction);

與前面的寫法大同小異，差別只是方法而已，注意後面代的參數myFunction是我們要停止事件發生時，所再次執行的程式!

範例:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: RED;
  padding: 50px;
  color: white;
}
</style>
</head>
<body>

<h1>JavaScript removeEventListener()</h1>

<div id="myDIV">
  <p></p>
  <button onclick="remove()" id="myBtn">刪除</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function remove() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

當我們滑鼠在移入紅色區塊時，當事件發生，就會觸發myFunction()函數印出亂數，而我們今天想停止這個事件監聽，當按下按鈕時去執行remove()函數，這個函數裡就是透過removeEventListener()方法停止執行myFunction()函數。達成我們所需的效果。

那今天介紹就到這邊拉!謝謝大家，我們明天繼續努力。