Javascript中事件驅(qū)動(dòng)的原理是什么

本篇文章為大家展示了Javascript中事件驅(qū)動(dòng)的原理是什么，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

首先來看看這樣一個(gè)應(yīng)用場(chǎng)景，網(wǎng)頁上有個(gè)鏈接，比如說高級(jí)搜索，點(diǎn)擊以后會(huì)出現(xiàn)一個(gè)搜索面板。由于面板里有很多搜索字段，而這些搜索字段又有很多數(shù)據(jù)，因此決定采用異步來加載該搜索面板。以jQuery為例，代碼可能會(huì)這么寫：

$('#advance_search’).bind(‘click’, function(e){  $('#advance_search_panel’).load(‘/xxx/advance_search.html"’);  });

但是呢，又需要在加載后做一些處理，比如說隱藏掉正在加載的提示文字或者圖標(biāo)，好說，就給load加上callback

….load(‘…..', function(){  $('#waiting_message’).hide();  })

面板里面有個(gè)搜索按鈕，點(diǎn)擊進(jìn)行搜索，加載完需要綁定click事件，于是我們又在下面加上：

….load(‘…..', function(){  $('#waiting_message’).hide();  $('#search_button’).bind(‘click’, do_advance_search);  })

某一天，其他有些頁面也要加上這個(gè)高級(jí)搜索，但是呢，加載完成后的處理又都不一樣，有的頁面需要隱藏掉某個(gè)div，有的頁面需要綁定一些操作等，這時(shí)候怎么辦？難道都去改這個(gè)load方法嗎？

有一種方法可以解決這個(gè)問題，加上callback參數(shù)用以回調(diào)，比如 new AdvancedSearch(callback); 當(dāng)然，除此以外，其實(shí)還有一種更優(yōu)雅的方法，事件驅(qū)動(dòng)。

代碼寫起來很簡(jiǎn)單，加載完畢后觸發(fā)這個(gè)事件:

….load(‘….', function() {  $().trigger(‘a(chǎn)dvanced_search_load_complete’);  })

需要在加載完成后做某些操作的地方綁定一下事件處理函數(shù)即可:

$().bind(‘a(chǎn)dvanced_search_load_complete’, function(){  ……  });

封裝的地方不用任何改動(dòng)，其它地方愛做什么操作就做什么操作，這就是事件驅(qū)動(dòng)的魅力，極大的松耦合。

總結(jié)一下，事件驅(qū)動(dòng)好處是什么呢？

1. 松耦合的交互，事件發(fā)布者和訂閱者無須知道對(duì)方的存在。

2. 多對(duì)多的關(guān)系，多個(gè)事件發(fā)布者對(duì)應(yīng)多個(gè)訂閱者。

3. 一個(gè)個(gè)事件發(fā)布出來，針對(duì)這些事件作出響應(yīng)，這就是一個(gè)業(yè)務(wù)場(chǎng)景，每個(gè)步驟清晰自然。

4. 事件發(fā)布可以帶參數(shù)，事件處理者可以拿到關(guān)于該事件的任何數(shù)據(jù)。

上述內(nèi)容就是Javascript中事件驅(qū)動(dòng)的原理是什么，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。