iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0
Modern Web

Javascripts惡補小教室系列 第 20

Day20 Javascript 事件監聽

  • 分享至 

  • xImage
  •  

監聽方法

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

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()函數。達成我們所需的效果。

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


上一篇
Day19 Javascript DOM集合
下一篇
Day21 Javascript Window
系列文
Javascripts惡補小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言