HTML DOM Event 對象參考手冊

addEventListener() 方法：向指定元素添加事件句柄，添加的事件句柄不會覆蓋已存在的事件句柄。

1.語法：

element.addEventListener(event, function, useCapture);

event：事件的類型 (如 "click" 或 "mousedown"，去掉on前綴)；

function：事件觸發後調用的函數。在函數無需參數傳遞的情況下只寫函數名，在函數需要參數傳遞的情況下用匿名函數調用外部函數實現。

useCapture：是個布爾值，用於描述事件是冒泡還是捕獲。該參數是可選的。

2.向原元素添加事件句柄：

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

3.向同一個元素中添加多個事件句柄：

<script>
/*
向同一個元素中添加多個相同的事件
*/
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener(
 
"click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函數已執行!")
}

<script>
/*
向同一個元素中添加不同的事件
*/
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener(
 
"mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

4.向 Window 對象添加事件句柄

<script>
/*
當用戶重置窗口大小時添加事件監聽
*/
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

5.函數需要傳遞參數時

<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

6.事件冒泡與事件捕獲

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？

在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。

在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然後再觸發 <p> 元素的點擊事件。

addEventListener(event, function, useCapture);

useCapture默認為 false——>冒泡傳遞，當值為 true ——>捕獲傳遞。

removeEventListener() 方法

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

JavaScript事件監聽