前言
JavaScript是一種事件驅動型語言。事件驅動是指JavaScript引擎並不是在看到代碼之后就會立即執行,而是會在合適的時間才去執行。這個合適的時間是指當某個事件發生之后(例如一個輸入框的內容發生了變化,這就是一個事件)。只有當相應的事件發生了之后,相應的操作才會執行,這就是事件驅動。
事件驅動包含三個關鍵內容:事件、事主和處理方法。
理解了事件模型,我們就能明白JavaScript中的代碼雖然是用於描述怎么操作對象的,但是並不一定要立即操作對象。
事件基礎、事件偵聽與拋發
js事件分為系統事件和自定義派發事件。
IE8以上支持
-
DOM.addEventListener(事件類型,事件回調函數);
事件偵聽方法,僅用於僅用於EventTarget對象,給DOM元素添加一個事件偵聽(監聽),只能收到對應事件類型的消息,當收到這個消息。就執行事件回調函數。
//這里click這個消息就是系統消息,clickHandler,就是這個系統消息收到后,執行的事件回調函數。
document.addEventListener("cilck",clickHandler);
/**
事件回調函數
e 有且僅有一個參數e
e 是一個事件對象,偵聽事件收到的消息時獲得的事件對象
*/
function clickHandler(e){
console.log(e);
}
-
EventTarget.dispatchEvent(事件對象);
拋發事件方法,派發事件,僅用於EventTarget對象
//這里的“myClick”,就是自定義事件類型,是事件傳輸的“暗號”。
document.addEventListener("myClick",myClickHandler);
var evt = new Event("myClick");//創建一個事件對象
evt.a=10;
document.dispatchEvent(evt);//向document拋發新建的event事件,拋發事件關鍵是將新建事件的參數傳輸出來
function myClickHandler(e){
console.log(e===evt);//true
console.log(e.a);//10,接收到了派發事件對象的參數
}
總結
- 事件必須先偵聽后拋發。
- 偵聽和派發的對象是同一個。
- 偵聽和派發的事件類型完全相同。其實事件類型就是一個任意字符串
- 系統派發的事件字符串是固定的,自定義派發的事件,字符串可以任意
- 事件偵聽回調函數,不能傳參,因此事件回調函數中有且僅有一個參數,這個參數即為事件對象
- 事件都可以手動派發,手動派發的話,頁面加載完后就會執行
案例
對象間數據傳遞, 打算執行obj2.c 將局部變量5傳遞給obj1的方法b中
要求:使程序模塊的可重用性、移植性大大增強。一個好的內聚模塊應當恰好做一件事。
obj1 和 obj2 互相調用,但是不相互影響,刪除任意一個函數后,也不會報錯。
// 高內聚低耦合
var obj1={
a:function(){
// this 對象的方法中this就是該對象自身,這里this就是obj1
document.addEventListener("aaa",this.b);
},
b:function(e){
// 傳到這里
console.log(e.s);//5
}
}
var obj2={
v:10,
c:function(){
var s=5;
var evt=new Event("aaa");
evt.s=s;
document.dispatchEvent(evt);
},
d:function(){
//......
}
}
obj1.a();//注冊事件
obj2.c();//創建事件,並且把這個事件拋發出去