資訊專欄INFORMATION COLUMN
摘要：我們就需要我們自己去定義事件其實(shí)就是我們寫的函數(shù)，尤其是組件開發(fā)過程中，用的尤為多?？赡苡写_定按鈕取消按鈕等操作。但是自定義事件的基本原理就是如上描繪的那樣
我們都知道，鼠標(biāo)點(diǎn)擊click，觸屏的touch等事件，可以觸發(fā)相應(yīng)的事件處理程序，也可以為這些事件添加事件處理程序，實(shí)際開發(fā)過程中可供我們使用的事件很少，click、doubleclick，mouseover、mousemove….等等這些。但當(dāng)我們的程序越來越復(fù)雜的時(shí)候，光靠這些最底層的監(jiān)聽似乎已近不能滿足我們的需求了。我們就需要我們自己去定義事件（其實(shí)就是我們寫的函數(shù)），尤其是組件開發(fā)過程中，用的尤為多。
既然是事件，就要有事件的特性。我們要能為這個(gè)事件添加監(jiān)聽程序，這個(gè)事件觸發(fā)時(shí)，監(jiān)聽程序也一定要觸發(fā)才行。原理跟底層的事件類似。只不過，需要我們自己處理這些。
比如我們寫了一個(gè)彈窗組件Box，他有彈出顯示的方法show，還有關(guān)閉的方法close等。
可能有確定按鈕、取消按鈕等操作。隨著產(chǎn)品或項(xiàng)目越復(fù)雜，被添加到這些確定或取消的操作也會(huì)越來越多。怎么辦？一種是最原始的監(jiān)聽這些按鈕的click事件，然后的寫不同的回調(diào)。但是用回調(diào)的方式，有個(gè)弊端，當(dāng)項(xiàng)目需求改變的時(shí)候，要往這個(gè)按鈕上再另加個(gè)回調(diào)的時(shí)候，就要改原先的代碼，要是以后再來一次，又要改。維護(hù)成本相當(dāng)大。
我們不妨換個(gè)思路，把這個(gè)‘確定’或‘取消’想成像click這樣的事件，當(dāng)‘確定‘這個(gè)事件發(fā)生時(shí)其相應(yīng)的一系列事件都會(huì)發(fā)生。就可以很好的解決這個(gè)問題。
基本原理：事件隊(duì)列，即將監(jiān)聽程序存到一個(gè)數(shù)組中，再自定函數(shù)執(zhí)行時(shí)，將添加監(jiān)聽數(shù)組中每個(gè)函數(shù)執(zhí)行一遍。
定義一個(gè)對(duì)象專門用于存儲(chǔ)自定義事件，定義一個(gè)方法用于注冊(cè)監(jiān)聽，還有一個(gè)方法需要我們主動(dòng)觸發(fā)這個(gè)注冊(cè)的監(jiān)聽程序(因?yàn)椴幌馽lick等事件可以被瀏覽器監(jiān)聽捕獲，瀏覽器無法識(shí)別我們自己定義的東西)。
代碼如下：
//定義一個(gè)Box類
function Box(){
//other code
this.handlers = {};//存儲(chǔ)事件的對(duì)象
}
Box.prototype = {
constructor: Box,
//顯示方法
show: function (){
//code
//this.fire("show");
},
//關(guān)閉方法
close: function (){
//code
//this.fire("close");
},
//監(jiān)聽方法，模擬addEventListener,其中type為事件函數(shù)，handler為需要觸發(fā)的函數(shù)。
addListener: function (type,handler){
if (typeof this.handlers[type] == "undefined")this.handlers[type] = [];
this.handlers[type].push(handler);//將要觸發(fā)的函數(shù)壓入事件函數(shù)命名的數(shù)組中
},
//手動(dòng)觸發(fā)方法
fire: function (type){
if ( this.handlers[type] instanceof Array ){
var handlers = this.handlers[type];
//遍歷事件函數(shù)監(jiān)聽的程序，依次執(zhí)行
for (var i=0;i
剩下就是在需要的的時(shí)候添加注冊(cè)監(jiān)聽了，比如
var box = new Box();
function listenShow1(){
console.log(11);
}
function listenShow2(){
console.log(22);
}
box.addListener("show",listenShow1);
box.addListener("show",listenShow2);
box.show();
當(dāng)show方法執(zhí)行，在外部或者show方法內(nèi)部執(zhí)行，這個(gè)可能根據(jù)實(shí)際具體項(xiàng)目或這具體情況來確定。
當(dāng)然以上只是基本原理，可能沒有特別考慮更為復(fù)雜或具體的實(shí)際情況。比如解綁是只想解綁某一類，像jQuery那樣，在事件身上加命名空間，解綁該命名空間上的所有函數(shù)。但是自定義事件的基本原理就是如上描繪的那樣！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/82134.html
摘要：可以用于事件處理函數(shù)中阻止冒泡行為。事件代理的原理和問題在我們了解了事件流之后，事件代理的原理就很好理解了，其實(shí)就是事件冒泡會(huì)觸發(fā)容器的相關(guān)事件并執(zhí)行監(jiān)聽函數(shù)。給注銷事件綁定。如果此事件正在執(zhí)行，會(huì)立即停止。 有如下 html 片段 11111111111 22222222222 33333333333 要對(duì) li 添加 click 事件。通常做法： var...
摘要：雙向數(shù)據(jù)綁定指的是，將對(duì)象屬性變化與視圖的變化相互綁定。數(shù)據(jù)雙向綁定已經(jīng)了解到是通過數(shù)據(jù)劫持的方式來做數(shù)據(jù)綁定的，其中最核心的方法便是通過來實(shí)現(xiàn)對(duì)屬性的劫持，達(dá)到監(jiān)聽數(shù)據(jù)變動(dòng)的目的。和允許觀察數(shù)據(jù)的更改并觸發(fā)更新。 1 MVVM 雙向數(shù)據(jù)綁定指的是，將對(duì)象屬性變化與視圖的變化相互綁定。換句話說，如果有一個(gè)擁有name屬性的user對(duì)象，與元素的內(nèi)容綁定，當(dāng)給user.name賦予一個(gè)新...
摘要：作為構(gòu)造函數(shù)使用，綁定到新創(chuàng)建的對(duì)象。內(nèi)部實(shí)現(xiàn)類和類的繼承構(gòu)造函數(shù)構(gòu)造函數(shù)調(diào)用父類構(gòu)造函數(shù)參考請(qǐng)盡可能詳盡的解釋的工作原理的原理簡單來說通過對(duì)象來向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用來操作而更新頁面。 1 . 請(qǐng)解釋事件代理 (event delegation) 當(dāng)需要對(duì)很多元素添加事件的時(shí)，可以通過將事件添加到它們的父節(jié)點(diǎn)通過委托來觸發(fā)處理函數(shù)。其中利用到了瀏覽器的事件冒泡機(jī)...
摘要：事件定義事件是與交互的最常見的方式但它也可以用于非代碼中通過實(shí)現(xiàn)自定義事件實(shí)現(xiàn)自定義事件的原理是創(chuàng)建一個(gè)管理事件的對(duì)象如下代碼是事件的定義存儲(chǔ)事件處理程序由個(gè)鍵值對(duì)組成鍵表示事件名值是一個(gè)由事件處理程序組成的數(shù)組添加事件觸發(fā)事件將傳遞給 事件定義 事件是與DOM交互的最常見的方式,但它也可以用于非DOM代碼中--通過實(shí)現(xiàn)自定義事件.實(shí)現(xiàn)自定義事件的原理是創(chuàng)建一個(gè)管理事件的對(duì)象.如下代碼...
閱讀 2435·2021-10-09 09:59
閱讀 2188·2021-09-23 11:30
閱讀 2599·2019-08-30 15:56
閱讀 1152·2019-08-30 14:00
閱讀 2946·2019-08-29 12:37
閱讀 1264·2019-08-28 18:16
閱讀 1665·2019-08-27 10:56
閱讀 1032·2019-08-26 17:23
