Javascript事件驅動的原理分析

今天小編給大家分享一下Javascript事件驅動的原理分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

首先來看看這樣一個應用場景，網頁上有個鏈接，比如說高級搜索，點擊以后會出現一個搜索面板。由于面板里有很多搜索字段，而這些搜索字段又有很多數據，因此決定采用異步來加載該搜索面板。以jQuery為例，代碼可能會這么寫：

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

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

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

面板里面有個搜索按鈕，點擊進行搜索，加載完需要綁定click事件，于是我們又在下面加上：

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

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

有一種方法可以解決這個問題，加上callback參數用以回調，比如 new AdvancedSearch(callback); 當然，除此以外，其實還有一種更優雅的方法，事件驅動。

代碼寫起來很簡單，加載完畢后觸發這個事件:

….load(‘….', function() {  $().trigger(‘advanced_search_load_complete’);  })

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

$().bind(‘advanced_search_load_complete’, function(){  ……  });

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

總結一下，事件驅動好處是什么呢？

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

2. 多對多的關系，多個事件發布者對應多個訂閱者。

3. 一個個事件發布出來，針對這些事件作出響應，這就是一個業務場景，每個步驟清晰自然。

4. 事件發布可以帶參數，事件處理者可以拿到關于該事件的任何數據。

以上就是“Javascript事件驅動的原理分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。