## 10.2 事件處理程序
響應某個事件的函數就叫做**事件處理程序(或事件偵聽器)**。
### 10.2.1 HTML事件處理程序
某個元素支持的每種事件,都可以使用一個與相應事件處理程序同名 HTML特性來指定。
在HTML中定義的事件處理程序可以包含要執行的具體動作,也可以調用在頁面其他地方定義的腳本。
特點:
* 創建一個封裝著元素屬性值的函數。這個函數中有一個局部變量event,即事件對象。通過event變量,可以直接訪問事件對象。在函數內部,this值等于時間的目標元素。
* 擴展作用域的方式:在函數內部,可以像訪問局部變量一樣訪問document及該元素本身的成員。
缺點:
* 存在一個時差問題。因為用戶可能會在HTML元素一出現在頁面上就觸發相應的事件,但當時的事件處理程序有可能尚不具備執行條件。
* 擴展事件處理程序的作用域鏈在不同瀏覽器中會導致不同結果。
* HTML與JavaScript代碼緊密耦合。
### 10.2.2 DOM0級事件處理程序
通過JavaScript指定事件處理程序的傳統方式,將一個函數賦值給一個事件處理程序屬性。
每個元素(包括window和document)都有自己的事件處理程序。
刪除可設置,如`btn.onclick = null;`
### 10.2.3 DOM2級事件處理程序
“DOM2級事件”定義了兩個方法,用于處理指定和刪除時間處理程序的操作:`addEventListener()和removeEventListener()`。所有節點中都包含這兩個方法,并且接受3個參數:要處理的事件名(前頭無on)、作為事件處理程序的函數和一個布爾值(true表示在捕獲階段調用時間處理程序,false表示在冒泡階段調用。)
~~~
var btn = document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false); //多數為false,最大限度兼容各種瀏覽器。
~~~
通過addEventListener()添加的事件處理程序**只能**使用removeEventListener()來移除;移除時傳入的參數與添加處理程序時使用的參數相同,意味著**添加的匿名函數將無法移除,建議傳入函數名。**
### 10.2.4 IE事件處理程序
IE實現了與DOM中類似的兩個方法:attachEvent()和detachEvent()。兩個方法接受相同的兩個參數:事件處理程序名稱(前綴on)與事件處理程序函數。
添加多個事件出程序時,按添加的相反順序被處罰。
添加的匿名函數也將不能被移除。
### 10.2.5 跨瀏覽器的事件處理程序
~~~
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler,false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else if (element != window) {
element['on' + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else if (element != window) {
element['on' + type] = null;
}
}
};
var btn = document.getElementById("mybtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
~~~
- 前言
- 第一章 JavaScript簡介
- 第三章 基本概念
- 3.1-3.3 語法、關鍵字和變量
- 3.4 數據類型
- 3.5-3.6 操作符、流控制語句(暫略)
- 3.7函數
- 第四章 變量的值、作用域與內存問題
- 第五章 引用類型
- 5.1 Object類型
- 5.2 Array類型
- 5.3 Date類型
- 5.4 基本包裝類型
- 5.5 單體內置對象
- 第六章 面向對象的程序設計
- 6.1 理解對象
- 6.2 創建對象
- 6.3 繼承
- 第七章 函數
- 7.1 函數概述
- 7.2 閉包
- 7.3 私有變量
- 第八章 BOM
- 8.1 window對象
- 8.2 location對象
- 8.3 navigator、screen與history對象
- 第九章 DOM
- 9.1 節點層次
- 9.2 DOM操作技術
- 9.3 DOM擴展
- 9.4 DOM2和DOM3
- 第十章 事件
- 10.1 事件流
- 10.2 事件處理程序
- 10.3 事件對象
- 10.4 事件類型
- 第十一章 JSON
- 11.1-11.2 語法與序列化選項
- 第十二章 正則表達式
- 12.1 創建正則表達式
- 12.2-12.3 模式匹配與RegExp對象
- 第十三章 Ajax
- 13.1 XMLHttpRequest對象
- 你不知道的JavaScript
- 一、作用域與閉包
- 1.1 作用域
- 1.2 詞法作用域
- 1.3 函數作用域與塊作用域
- 1.4 提升
- 1.5 作用域閉包
- 二、this與對象原型
- 2.1 關于this
- 2.2 全面解析this
- 2.3 對象
- 2.4 混合對象“類”
- 2.5 原型
- 2.6 行為委托
- 三、類型與語法
- 3.1 類型
- 3.2 值
- 3.3 原生函數