【重溫基礎】20.事件
本文是 重溫基礎 系列文章的第二十篇。html
這是第三個基礎系列的第一篇，歡迎持續關注呀！
重溫基礎 系列的【初級】和【中級】的文章，已經統一整理到個人【Cute-JavaScript】的JavaScript基礎系列中。前端
今日感覺：電影有時候看的是緣分。git
系列目錄：github
- 【複習資料】ES6/ES7/ES8/ES9資料整理(我的整理)
- 【重溫基礎】1-14篇
- 【重溫基礎】15.JS對象介紹
- 【重溫基礎】16.JSON對象介紹
- 【重溫基礎】17.WebAPI介紹
- 【重溫基礎】18.相等性判斷
- 【重溫基礎】19.閉包
本章節複習的是JS中的事件，事件冒泡捕獲代理模擬等等。瀏覽器
前置知識：
JavaScript與HTML的交互式經過事件來實現的，是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。微信
1.事件流
事件流描述的是從頁面中接收事件的順序，一般有這樣兩種徹底相反的事件流概念：事件冒泡流（IE團隊提出）和事件捕獲流（網景團隊提出）。閉包
1.1 事件冒泡
冒泡事件（Event Bubbling）：事件開始時由最具體的元素接收（文檔中嵌套層次最深的那個節點），而後逐層向上傳播到較爲不具體的節點（文檔），看下示例代碼：dom
<!DOCTYPE html>
<html>
<head>
<title>leo 事件冒泡</title>
</head>
<body>
<div id="leo">點擊</div>
</body>
</html>
複製代碼
點擊頁面中<div>元素，這個click事件就會按照下面順序傳播：函數
<div><body><html>document
因而可知，元素綁定的事件會經過DOM樹向上傳播，每層節點都會發生，直到document對象，如圖展現了冒泡過程：
post
1.2 事件捕獲
事件捕獲（Event Capturing）：讓不太具體的節點更早接收事件，而最具體的節點最後接收事件，即在事件到達預約目標以前捕獲到，看下示例代碼（HTML代碼和前面同樣），事件捕獲的過程是這樣的：
document<html><body><div>
看得出，document對象最新接收事件，而後沿DOM樹依次向下，直到最後的實際目標<div>元素，如圖展現了捕獲過程：
注意：因爲老版本的瀏覽器不支持，所以不多人使用事件捕獲，不過若是特殊需求仍是可使用事件捕獲，建議仍是使用事件冒泡。
1.3 DOM事件流
「DOM2級事件」規定的事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。
事件捕獲爲截獲事件提供機會，而後實際的目標接收到事件，最後事件冒泡，對事件做出響應。按照前面的HTML代碼，整個流程是這樣的：
在DOM事件流中，實際目標（<div>元素）在捕獲階段不接收事件，即在捕獲階段，事件從document對象到<html>再到<body>後就中止，進入「處於目標」階段，事件在<div>元素上發生，而後才進入冒泡階段，將事件傳回給文檔。
注意：目前主流瀏覽器都支持DOM事件流，只有IE8和以前版本不支持。
2.事件處理
事件處理，即響應某個事件。咱們把事件處理的函數，稱爲「事件處理程序」。
事件處理程序的名稱通常都以on開頭，如click事件的事件處理程序就是onclick，load事件的事件處理程序就是onload。
咱們將事件處理程序，分爲這麼幾類：
- HTML事件處理程序
- DOM0級事件處理程序
- DOM2級事件處理程序
- IE事件處理程序
- 跨瀏覽器事件處理程序
2.1 HTML事件處理程序
某個元素支持的事件，均可以用一個與相應事件處理程序同名的HTML特性來指定，這個特性的值應該是可以執行的JavaScript代碼。好比：
<input type="button" value="點擊" onclick="alert('hello leo');">
複製代碼
也能夠把須要執行的具體事件單獨定義出來，能夠放置與單獨.js文件，也能夠在文檔內用<script>標籤引入：
function fun(){
alert('hello leo');
}
複製代碼
<input type="button" value="點擊" onclick="fun()">
複製代碼
咱們經過這樣指定事件處理程序，能夠有一個局部變量event來獲取事件對象自己，在這個函數內部，this值等於這個變量event。
<input type="button" value="點擊" onclick="fun(event)">
複製代碼
另外，HTML中指定事件處理程序，會有2個缺點：
- 存在時間差
可能出現這樣的狀況：HTML元素觸發事件，可是事件處理程序還未定義（函數的定義在HTML最底下定義），就會出現報錯，這與HTML代碼加載順序有關。 - 做用域鏈的異常 因爲不一樣瀏覽器JavaScript引擎遵循的標識符解析規則存在差別，致使訪問非限定對象成員時出錯，表現爲事件處理程序的做用域鏈在不一樣瀏覽器結果不一樣。
- HTML和JavaScript代碼緊密耦合 這經常就是不少開發人員放棄HTML事件處理程序的緣由。
2.2 DOM0級事件處理程序
經過賦值形式，將一個函數賦值給一個事件處理程序屬性。每一個元素（包含window和document）都有本身的事件處理屬性，這些屬性一般所有小寫，如onclick，將這種屬性的值設置成一個函數，就能夠指定事件處理程序：
var leo = document.getElementById('leo');
leo.onclick = function(){
alert('hello leo!');
}
複製代碼
使用DOM0級方法指定事件處理程序，被認爲是元素的方法。此時的事件處理程序是在元素的做用域執行，那麼，this就引用當前元素，能夠訪問元素的任何屬性和方法：
var leo = document.getElementById('leo');
leo.onclick = function(){
alert(this.id); // "leo"
}
複製代碼
咱們也能夠經過設置事件處理程序屬性來刪除DOM0級的事件處理程序。
leo.onclick = null;
複製代碼
2.3 DOM2級事件處理程序
有2個方法：
- 添加事件處理程序：
addEventListener() - 刪除事件處理程序：
removeEventListener()
全部的DOM節點都包含這兩個方法，而且它們都接收三個參數：
- 處理的事件名稱
- 事件處理程序的函數
- 布爾值（true：事件捕獲階段調用，false：事件冒泡階段調用）
var leo = document.getElementById('leo');
leo.addEventListener('click',function(){
alert(this.id); // "leo"
},false);
複製代碼
與DOM0級方法同樣，這裏的事件處理程序也會是在元素的做用域中執行，所以this也是指向元素，能夠訪問元素的任何屬性和方法。
使用DOM2級方法，能夠添加多個事件處理程序，並按照添加順序觸發：
var leo = document.getElementById('leo');
leo.addEventListener('click',function(){
alert(this.id); // "leo"
},false);
leo.addEventListener('click',function(){
alert('hello leo!'); // "hello leo!"
},false);
複製代碼
注意：經過addEventListener()添加的事件只能經過removeEventListener()移除，而且二者傳入的參數一致，這就意味着經過addEventListener()添加的匿名函數不能被移除，看下面代碼：
var leo = document.getElementById('leo');
leo.addEventListener('click',function(){
alert(this.id); // "leo"
},false);
// 沒有效果
leo.removeEventListener('click',function(){
// do some thing
},false);
複製代碼
沒有效果是由於這兩個方法傳入的函數，是徹底不一樣的，爲了達到刪除事件處理程序的效果，咱們能夠將處理函數單獨定義出來：
var leo = document.getElementById('leo');
var fun = function(){
alert(this.id);
}
leo.addEventListener('click',fun,false);
// 有效果
leo.removeEventListener('click',fun,false);
複製代碼
2.4 IE事件處理程序
IE實現兩種方法： attachEvent()和detachEvent()。這兩個方法接收相同的兩個參數：事件處理程序名稱和事件處理程序函數。
因爲IE8和更早版本只支持事件冒泡，因此經過attachEvent()添加的事件處理程序會被添加到冒泡階段。
var leo = document.getElementById('leo');
leo.attachEvent('onclick',function(){
alert('hello leo'); // "leo"
},false);
// attachEvent也支持添加多個事件處理程序
leo.attachEvent('onclick',function(){
alert('hello world'); // "leo"
},false);
複製代碼
注意：這裏的第一個參數是onclick而不是DOM的addEventListener()的click。
IE的attachEvent()和DOM0級方法區別：
二者事件處理程序的做用域不一樣。
- DOM0級方法，做用域在所屬元素的做用域。
- attachEvent()，做用域在全局做用域，即
this指向window。
和DOM0級方法同樣，detachEvent()只能移除使用attachEvent()添加的方法，爲了不沒法移除，也是須要將處理的函數單獨定義出來：
var leo = document.getElementById('leo');
var fun = function(){
alert(this.id);
}
leo.attachEvent('onclick',fun,false);
// 有效果
leo.detachEvent('onclick',fun,false);
複製代碼
2.6 跨瀏覽器事件處理程序
在作跨瀏覽器事件處理程序，咱們能夠有兩種方式：
- 使用可以隔離瀏覽器差別的JavaScript庫
- 單獨手寫一個處理方法
咱們單獨受寫一個處理方法也不難，只需關注好事件冒泡階段，咱們能夠建立一個方法，區分使用DOM0級方法、DOM2級方法或IE方法便可，默認採用DOM0級方法。
var my_event = {
addMyEvent:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
};
removeMyEvent:function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element['on' + type] = null;
}
}
}
複製代碼
3.事件對象
當觸發一個DOM上的事件時，都會產生一個事件對象event，並做爲參數傳入事件處理程序，這個對象包含全部與事件相關的信息。包括致使事件的元素、事件類型等其餘信息。
3.1 DOM中的事件對象
不管指定事件處理程序時使用什麼方法（DOM0級方法或DOM2級方法），都會傳入event對象：
var leo = document.getElementById('leo');
leo.onclick = function(event){
alert(event.type); // 'click'
}
leo.addEventListener('click',function(event){
alert(event.type); // 'click'
},false);
複製代碼
event對象包含與建立它的特定事件相關的屬性和方法，經常有以下成員：
咱們可使用event中的對象和方法：
- 阻止事件的默認行爲
var leo = document.getElementById('leo');
leo.onclick = function(event){
// 只有當 event 中的 cancelable 屬性爲true的事件
event.preventDefault();
}
複製代碼
- 當即中止事件在DOM的傳播
經過調用event.stopPropagation()方法避免彈框出現兩次。
var leo = document.getElementById('leo');
leo.onclick = function(event){
alert('leo');
event.stopPropagation();
}
document.body.onclick = function(event){
alert('hello leo');
}
複製代碼
3.2 IE中的事件對象
訪問IE中的事件對象event，方法有多種，取決於事件處理程序的方法：
- DOM0級方法，使用
window.event
var leo = document.getElementById('leo');
leo.onclick = function(){
var event = window.event;
alert(event.type); // 'click'
}
複製代碼
- IE的
attachEvent方法，event做爲參數傳入（也可使用window.event）
var leo = document.getElementById('leo');
leo.attachEvent('onclick',function(event){
alert(event.type); // 'click'
},false);
複製代碼
3.3 跨瀏覽器的事件對象
雖然DOM和IE中event對象不一樣，但咱們也能夠和前面的 跨瀏覽器事件處理程序 處理同樣，經過他們之間的區別，實現映射：
var my_event = {
myAddFun : function(element, type, handler){
// do some thing
},
// 返回對event的引用
getMyEvent : function(event){
return event?event:window.event;
},
// 返回事件的目標
getMyTarget : function(event){
return event.target || event.srcElement;
},
// 取消事件的默認行爲
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}else {
event.returnValue = false;
}
},
myRemoveFun : function(element, type, handler){
// do some thing
},
// 阻止事件流
stopPropagetion : function(event){
if(event.stopPropagetion){
event.stopPropagetion();
}else {
event.cancelBubble = true;
}
}
}
var leo = document.getElementById('leo');
leo.onclick = function(event){
alert('leo');
event = my_event(event);
my_event.stopPropagation(event);
}
leo.onclick = function(event){
alert('hello world');
}
複製代碼
4.事件類型
Web瀏覽器中的事件類型有不少，DOM3級事件規定有如下幾類事件類型：
- UI事件：當用戶與頁面上元素交互時觸發；
- 焦點事件：當元素失去或獲取焦點時觸發；
- 鼠標事件：當用戶經過鼠標在頁面操做時觸發；
- 滾輪事件：當使用鼠標滾輪（或相似設備）時觸發；
- 文本事件：當在文檔中輸入文本時觸發；
- 鍵盤事件：當用戶經過鍵盤操做時觸發；
- 合成事件：當爲IME輸入字符時觸發；
- 變更事件：當底層DOM結構變更時觸發；
具體每一個方法的詳細介紹，能夠查看**W3school HTML DOM Event 對象**
或者查看《JavaScript高級程序設計（第三版）》的第362頁開始。
我後面會單獨整理一篇，介紹這些事件的文章。
5.事件委託
簡單理解就是講一個響應事件委託到另外一個元素。
事件委託利用事件冒泡，指定一個事件處理程序來管理某一類型的全部事件，好比咱們經過一個函數來代替其餘三個函數：
<ul id="btn">
<li id="btn1">按鈕1</li>
<li id="btn2">按鈕2</li>
<li id="btn3">按鈕3</li>
</ul>
複製代碼
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
// my_event 在前面定義了
my_event.myAddFun(btn1, 'click', function(event){
alert('btn1點擊');
});
my_event.myAddFun(btn2, 'click', function(event){
alert('btn2點擊');
});
my_event.myAddFun(btn3, 'click', function(event){
alert('btn3點擊');
});
複製代碼
下面咱們在DOM樹層級更高的元素上添加一個事件處理函數，來作事件委託，咱們這麼重寫這段代碼：
var btn = document.getElementById('btn');
my_event.myAddFun(btn, 'click', function(event){
event = my_event.getMyEvent(event);
var target = my_event.getMyTarget(event);
switch(target.id){
case "btn1":
alert('btn1點擊');
break;
case "btn2":
alert('btn2點擊');
break;
case "btn3":
alert('btn3點擊');
break;
}
});
複製代碼
最適合採用事件委託技術的事件包括：click/mousedown/mouseup/keyup/keydown/keypress，雖然mouseover和mouseout事件也有冒泡，但由於很差處理它們而且常常須要從新計算元素位置。
能夠看出，事件委託有如下優勢：
- 減小內存消耗
- 動態綁定事件
6.事件模擬
JavaScript的事件模擬主要用來在任意時刻觸發特定事件。
6.1 DOM中的事件模擬
在document對象上使用createEvent()方法建立一個event對象。
createEvent()接收一個參數，即要建立的事件類型的字符串。
DOM2級中，全部這些字符串都使用英文複數形式，DOM3級中都變成單數，也能夠是下面中的字符串：
- UIEvents : 通常化的UI事件（鼠標和鍵盤事件都繼承自UI事件）（DOM3級中
UIEvent） - MouseEvents : 通常化的鼠標事件（DOM3級中
MouseEvent） - MutationEvents : 通常化的DOM滾動事件（DOM3級中
MutationEvent） - HTMLEvents : 通常化的HTML事件（DOM3級中
HTMLEvent）
建立event以後，咱們須要使用dispatchEvent()方法去觸發這個事件，須要傳入一個參數，參數是須要觸發事件的event對象。
全部支持事件的DOM節點都支持這個方法。事件觸發以後，事件就能照樣冒泡並引起響應事件處理程序的執行。
6.1.1 模擬鼠標事件
使用createEvent()方法傳入MouseEvents建立一個鼠標事件，返回的對象有一個initMouseEvent()方法，用於指定與該鼠標事件相關的信息，有15個參數：
- type ： 字符串，表示觸發的事件類型，如
click - bubble : 布爾值，表示是否冒泡，爲了精確模擬鼠標事件，一般設置爲true
- cancelable ：布爾值，表示是否能夠取消，爲了精確模擬鼠標事件，一般設置爲true
- view : 與事件關聯的視圖，基本都設置爲
document.defaultView - detail : 整數，與事件有關的詳細信息，基本設置爲0
- screenX : 整數，事件相對屏幕的X座標
- screenY : 整數，事件相對屏幕的Y座標
- clientX : 整數，事件相對視口的X座標
- clientY : 整數，事件相對視口的Y座標
- ctrlKey : 布爾值，表示是否按下Ctrl鍵，默認false
- altKey : 布爾值，表示是否按下Alt鍵，默認false
- shiftKey : 布爾值，表示是否按下Shift鍵，默認false
- metaKey : 布爾值，表示是否按下Meta鍵，默認false
- button : 整數，表示按下哪一個鼠標鍵，默認0
- relatedTarget : 對象，表示與事件相關的對象，只在
mouseover和mouseout時使用
案例：
var btn = document.getElementById('btn');
var myEvent = document.createEvent('MouseEvents');
myEvent.initMouseEvent(
'click', true, true, document.defaultView,
0, 0, 0, 0, 0,
false, false, false, false, 0, null
)
btn.dispatchEvent(myEvent);
複製代碼
6.1.2 模擬鍵盤事件
DOM3級規定，使用createEvent()方法傳入KeyboardEvent建立一個鍵盤事件，返回的對象有一個initKeyEvent()方法，有8個參數：
- type ： 字符串，表示觸發的事件類型，如
keydown - bubble : 布爾值，表示是否冒泡，爲了精確模擬鍵盤事件，一般設置爲true
- cancelable ：布爾值，表示是否能夠取消，爲了精確模擬鍵盤事件，一般設置爲true
- view : 與事件關聯的視圖，基本都設置爲
document.defaultView - key : 整數，表示按下的鍵的鍵碼
- localtion : 整數，表示按下哪裏的鍵，默認0表示主鍵盤，1表示左，2表示右，3表示數字鍵盤，4表示移動設備（即虛擬鍵盤），5表示手柄
- modifiers : 字符串，空格分隔的修改件列表，如"shift"
- repeat : 整數，在一行中按了多少次這個鍵
因爲DOM3級不提倡使用keypress事件，所以只能用這個方式來模擬keyup/keydown事件。
模擬按住Shift和A鍵的案例：
var btn = document.getElementById('btn');
var myEvent;
// 以DOM3級方式建立
if(document.implementation.hasFeature('KeyboardEvents', '3.0')){
myEvent = document.createEvent('KeyboardEvent');
myEvent.initKeyboardEvent(
'keydown', true, true, document.defaultView,
'a', 0, 'Shift', 0
);
}
btn.dispatchEvent(myEvent);
複製代碼
6.1.3 模擬其餘事件
如模擬變更事件和HTML事件。
- 模擬變更事件
經過createEvent()傳入MutationEvents參數建立，返回一個initMutationEvent()方法，這個方法接收參數包括：type/bubbles/cancelable/relatedNode/preValue/newValue/attrName/attrChange，下面模擬一個案例：
var btn = document.getElementById('btn');
var myEvent = document.createEvent('MutationEvents');
myEvent.initMutationEvent(
'DOMNodeInserted', true, false, someNode, '', '', '', 0
);
btn.dispatchEvent(myEvent);
複製代碼
- 模擬HTML事件
經過createEvent()傳入HTMLEvents參數建立，返回一個initEvent()方法，下面模擬一個案例：
var btn = document.getElementById('btn');
var myEvent = document.createEvent('HTMLEvents');
myEvent.initEvent('focus', true, false);
btn.dispatchEvent(myEvent);
複製代碼
6.1.4 自定義DOM事件
經過createEvent()傳入CustomEvent參數建立，返回一個initCustomEvent()方法，有4個參數：
- type ： 字符串，表示觸發的事件類型，如
keydown - bubble : 布爾值，表示是否冒泡，爲了精確模擬鍵盤事件，一般設置爲true
- cancelable ：布爾值，表示是否能夠取消，爲了精確模擬鍵盤事件，一般設置爲true
- detail : 對象，任意值，保存在
event對象的detail屬性中
案例：
var btn = document.getElementById('btn');
var myEvent;
// my_event在前面定義 2.6 跨瀏覽器事件處理程序
my_event.addMyEvent(btn, 'myevent', function(event){
alert('btn detail ', event.detail);
});
my_event.addMyEvent(document, 'myevent', function(event){
alert('document detail ', event.detail);
});
// 以DOM3級方式穿件
if(document.implementation.hasFeature('CustomEvents', '3.0')){
myEvent = document.createEvent('CustomEvent');
myEvent.initCustomEvent(
'myevent', true, false, 'hello leo',
);
btn.dispatchEvent(myEvent);
}
複製代碼
6.2 IE中的事件模擬
IE8及以前的版本模擬事件和DOM中模擬思路類似：想建立event對象再指定信息，最後觸發。
區別在於，IE中使用document.createEventObject()方法建立event對象，而且不接收參數，返回一個通用event對象，咱們要作的就是給這個event對象添加信息，最後在目標上調用fireEvent()方法，並接受兩個參數（事件處理程序的名稱和event對象）。
在調用fireEvent()方法會自動添加srcElement和type屬性，咱們須要手動添加其餘屬性，下面模擬一個click事件：
var btn = document.getElementById('btn');
var myEvent = document.createEventObject();
myEvent.screenX = 100;
myEvent.screenY = 0;
myEvent.clientX = 100;
myEvent.clientY = 0;
myEvent.ctrlKey = false;
myEvent.altKey = false;
myEvent.shiftKey = false;
myEvent.button = 0;
btn.fireEvent('onclick', event);
複製代碼
參考文章
- 《JavaScript高級程序設計》第13章 事件
本部份內容到這結束
| Author | 王平安 |
|---|---|
| pingan8787@qq.com | |
| 博 客 | www.pingan8787.com |
| 微 信 | pingan8787 |
| 每日文章推薦 | github.com/pingan8787/… |
| JS小冊 | js.pingan8787.com |
歡迎關注個人微信公衆號【前端自習課】
- 1. 【重溫基礎】20.事件
- 2. 重溫java基礎
- 3. RxJava重溫基礎
- 4. linux基礎重溫
- 5. 【重溫JS】鞏固基礎-day12-事件對象(一)
- 6. 重溫Python基礎1：基礎知識
- 7. 【重溫基礎】10.數組
- 8. 【重溫基礎】19.閉包
- 9. 【重溫基礎】6.數字
- 10. 【重溫基礎】4.函數
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
- 1. 【重溫基礎】20.事件
- 2. 重溫java基礎
- 3. RxJava重溫基礎
- 4. linux基礎重溫
- 5. 【重溫JS】鞏固基礎-day12-事件對象(一)
- 6. 重溫Python基礎1：基礎知識
- 7. 【重溫基礎】10.數組
- 8. 【重溫基礎】19.閉包
- 9. 【重溫基礎】6.數字
- 10. 【重溫基礎】4.函數