文章目錄
- 一、事件註冊方式
- 1、刪除傳統方式註冊事件
- 2、刪除方法監聽方式註冊事件
- 二、完整代碼示例
- 1、代碼示例
- 2、執行結果
一、事件註冊方式
1、刪除傳統方式註冊事件
傳統方式 註冊事件 , 可以 直接在 HTML 標籤裏寫 onclick 等屬性 ,
<button id="btn1" onclick="alert('hello!')">按鈕1</button>也可以在 JavaScript 腳本中 , 獲取元素對象 , 為元素對象的 " on + 事件名稱 " 成員設置一個函數 ;
var btn1 = document.getElementById('btn1');
// 1. 傳統方式註冊事件
btn1.onclick = function() {
alert('hello1!');
}要刪除這種事件 , 只需將對應的 DOM 元素的 onxxx 屬性設置為 null 即可 ;
btn1.onclick = null;這種方式將 事件處理程序 直接賦值給了 元素的一個屬性 , 當你把它設置為 null , 就相當於移除了這個屬性的值 , 事件自然就失效了 ;
2、刪除方法監聽方式註冊事件
方法監聽方式註冊事件 是通過調用 DOM 元素的 element.addEventListener(eventName, functionName[, useCapture]); 函數 註冊的事件 , 最現代、最推薦的事件註冊方式 , 因為它允許為同一個事件註冊多個處理程序 , 如下面的代碼所示 :
var btn2 = document.getElementById('btn2');
// 2. 事件偵聽註冊事件
function fun() {
alert('hello2!');
}
btn2.addEventListener('click', fun);要刪除這種方式註冊的事件 , 必須使用 removeEventListener 方法 , 並提供與註冊時完全相同的參數 :
- 事件類型 : 如
click, 不能有 on 前綴 ; - 處理函數 : 這裏要求事件函數 , 不能是 匿名函數 , 因為 匿名函數 都是一次性的 ;
- 可選參數 : 捕獲 / 冒泡階段 , 如果註冊事件階段指定了該參數 , 則刪除事件時也必須指定該參數 ;
要移除上面 DOM 元素註冊的事件 , 可以通過調用下面的代碼實現 ;
btn2.removeEventListener('click', fun);
二、完整代碼示例
1、代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件註冊</title>
<style></style>
</head>
<body>
<div>
<button id="btn1">按鈕1 傳統方式註冊事件</button>
<button id="btn2">按鈕2 事件監聽方式註冊事件</button>
</div>
<div>
<button id="btn3">移除 按鈕1 點擊事件</button>
<button id="btn4">移除 按鈕2 點擊事件</button>
</div>
<script>
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// 1. 傳統方式註冊事件
btn1.onclick = function() {
alert('hello1!');
}
// 2. 事件偵聽註冊事件
function fun() {
alert('hello2!');
}
btn2.addEventListener('click', fun);
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
// 3. 移除 傳統方式註冊事件
btn3.addEventListener('click', function() {
btn1.onclick = null;
alert('移除 按鈕1 事件成功!');
})
// 4. 移除 事件監聽方式註冊事
btn4.addEventListener('click', function() {
btn2.removeEventListener('click', fun);
alert('移除 按鈕2 事件成功!');
})
</script>
</body>
</html>
2、執行結果
進入頁面後 , 按鈕1 和 按鈕2 都有註冊事件 ;
點擊 " 移除 按鈕1 點擊事件 " 按鈕後 , 按鈕 1 事件被移除 , 再次點擊 按鈕 1 沒有事件響應 ;
點擊 " 移除 按鈕2 點擊事件 " 按鈕後 , 按鈕 2 事件被移除 , 再次點擊 按鈕 2 沒有事件響應 ;
完整執行效果 :
