【JS基礎】DOM 事件流與事件處理程序

時間 2019-12-05

標籤 JS基礎 dom 事件處理程序欄目 HTML 简体版

原文原文鏈接

本文參考《JS高級程序設計（第3版）》html

事件，就是文檔或瀏覽器窗口發生的一些特定的交互瞬間。能夠用偵聽器（或處理程序）來預訂事件，以便事件發生時執行相應的代碼。瀏覽器

DOM 事件流

「DOM2級事件」規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。函數

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click me</div> </body> </html> 複製代碼

在上述代碼中，單擊<div>元素會按順序觸發事件：ui

捕獲階段：1. Document 2. Element html 3. Element body
處於目標階段：4. Element div (事件在此發生)
冒泡階段： 5. Element body 6. Element html 7. Document （事件傳播迴文檔）

事件處理程序

響應某個事件的函數就叫作事件處理程序（或事件偵聽器）。事件處理程序的名字以"on"開頭，因此click事件的事件處理程序就是onclick。this

DOM2 級事件處理程序

「DOM2 級事件」定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener() 全部DOM節點都包含這兩個方法，都接受三個參數：spa

要處理的事件名
做爲事件處理程序的函數
一個布爾值：true表示在捕獲階段調用事件處理程序；false表示在冒泡階段調用事件處理程序

大多數狀況下，都是將事件處理程序添加到事件流的冒泡階段，以最大限度兼容各類瀏覽器。設計

`addEventListener()`

// 在按鈕上爲click事件添加事件處理程序：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    alert(this.id);
}, false);
複製代碼

使用DOM2 級方法添加事件處理程序的主要好處是能夠添加多個事件處理程序，按照添加的順序觸發。code

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    alert(this.id);
}, false);

btn.addEventListener("click", function() {
    alert("Hello world!");
}, false);

/* 輸出： myBtn Hello world! */
複製代碼

`removeEventListener()`

經過addEventListener()添加的事件處理程序只能經過removeEventListener()移除。xml

須要注意的是添加的匿名函數沒法移除，要重寫。由於移除方法中的參數匿名function()和添加方法中的是一個徹底不一樣的函數。htm

btn.addEventListener("click", function() {
    alert("Hello world!");
  }, false);

// 移除不起做用
  btn.removeEventListener("click", function() {
    alert("Hello world!");
  }, false);
複製代碼

重寫以下：

// 重寫
  var handler = function() {
    alert("Hello world!");
  };
  
  btn.addEventListener("click", handler, false);

// 起做用
  btn.removeEventListener("click", handler, false);
複製代碼