[記錄] JavaScript 中的事件(Event物件、事件源物件、事件流、事件繫結)【轉發】
阿新 • • 發佈：2020-11-18
event物件:
什麼是event物件： 用來獲取事件的詳細資訊。(如：鍵盤的狀態、滑鼠的位置、滑鼠按鈕的狀態)
event物件瀏覽器相容問題：
| 1 2 3 4 5 |
function (ev) {
// IE: 支援window.event
// 標準： 事件處理函式傳入的ev物件
var ev = ev || window.event;
}
|
事件源物件：
| 1 2 3 4 5 |
FF: event.target
IE: event.srcElement
Chreme 都支援
相容寫法：
var target = event.target || event.srcElement; |
事件委託：
| 1 2 3 4 5 |
什麼是事件委託： 通俗的講就是委託長輩來執行事件。
把事件繫結到事件源物件的祖先元素上，利用事件冒泡原理觸發事件。
優點：
1. 提高效能，不需要迴圈所有元素一個一個繫結事件。
2. 靈活，有動態建立進來的新元素不需要重新繫結事件。
|
事件流：
事件捕獲：(從外往裡，一層一層觸發)
事件冒泡：(從裡往外 -> 一層一層觸發) 在一個元素物件上觸發某類事件(如onclick事件), 那麼這個事件就會向這個元素物件的父級傳遞，直到最頂級document物件或window物件。傳遞物件上所有同類事件都將被啟用。
優點：
事件冒泡允許多個操作被集中處理(把事件處理函式新增到一個父級元素上，避免把事件處理函式新增到多個子元素上), 它還可以讓你在物件層的不同層捕獲到事件。
缺點：
有時候會出現干擾，因此需要阻止事件冒泡；
| 1 2 3 4 5 6 7 8 9 10 11 12 |
阻止事件冒泡：
IE： event.cancalBubble = true;
W3C標準: event.stopPropagation();IE9以下版本不支援
封裝阻止事件冒泡函式：
function stopBubble(ev) {
var ev = ev || window.event;
if(ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelBubble = true;
}
}
|
阻止預設事件：
預設事件： 如表單提交，a標籤跳轉，右鍵選單等...
| 1 2 3 4 5 6 7 8 9 10 11 12 |
1. return false; 只有以物件屬性的方式註冊的事件才生效;
2. event.preventDefault(); W3C標準，IE9以下不相容
3. event.returnValue = false; IE
封裝阻止預設事件函式：
function cancelHandler(ev){
var ev = ev || window.event;
if(ev.preventDefault) {
ev.preventDefault();
}else{
ev.returnValue = false;
}
}
|
事件繫結/解除繫結
新增事件的方式：
1. 普通新增事件(一個元素的同一個事件上只能繫結一個事件處理函式，後定義的覆蓋之前定義的)
| 1 2 |
oBtn.onclick = function() { console.log('A'); }
oBtn.onclick = function() { console.log('B'); }
|
2. 繫結的方式新增事件(可以新增多個事件處理函式)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
標準瀏覽器：
新增繫結
obj.addEventListener(type[事件名稱], fn[事件處理函式], 是否捕獲true/false);
解除繫結
obj.removeEventListener(type[事件名稱], fn[事件處理函式],是否捕獲true/false);
注意：三個引數、事件名不帶on、事件處理函式先繫結先執行、this指向繫結事件的物件。
IE：
新增繫結
obj.attachEvent('on'+type[事件名稱], fn[事件處理函式]);
解除繫結
obj.detachEvent('on'+type[事件名稱], fn[事件處理函式]);
注意： 兩個引數、事件名帶on、事件處理函式先繫結後執行、this指向window。
繫結事件封裝：
給某個物件，繫結某個事件，執行某個函式
function addEvent(elem, type, handle) {
if(elem.addEventListener) {
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent) {
elem.attaceEvent('on' + type, fnction() {
handle.call(elem);
});
}else{
elem['on' + type] = handle;
}
}
解除繫結事件封裝：(匿名函式無法解綁)
function removeEvent(elem, type, handle) {
if(elem.removeEventListener) {
elem.removeEventListener(type, handle, false);
}else if(elem.detachEvent) {
elem.detachEvent('on' + type, function() {
handle.call(elem);
});
}else{
elem['on' + type] = null;
}
}
|