今天要來介紹監聽,監聽是甚麼呢? 其實這樣跟事件一起說起,事件就是指當我們按下按鈕,或是輸入框輸入文字時,或是瀏覽器加載完成,滑鼠移入、移出、雙擊,這些都是事件,那事件監聽的行為就很好理解了,我們去持續關注這些發生的事件,就是監聽! 那實際上要使用甚麼方法,就是我們接下來的主角。
addEventListener() 方法
addEventListener() 方法為替我們指定的元素及指定事件做處理,一個元素我們可以擁有多種事件,就算是相同的類型,兩個'click'事件也是可行的。而不僅僅包含HTML元素,也能透過向全局window新增事件來達到我們所需的效果,任何的DOM對象都可以添加事件,那有新增一訂有刪除,removeEventListener() 就是我們刪除事件監聽的方法。
寫法:
element.addEventListener(event, function, useCapture);
接下來我們來看實際範例。
範例:
<!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()函數。達成我們所需的效果。
那今天介紹就到這邊拉!謝謝大家,我們明天繼續努力。