為什么要使用自定義事件，它有什么優(yōu)勢？

有一個場景，點擊按鈕得到新的文章及相關(guān)文章：

圖片描述

我現(xiàn)在的實現(xiàn)方式是

updateButton.addEventListener('click',() => {
    articleArea.update();
    relatedArea.update();
});;

后來被告知使用自定義事件來完成：

updateButton.dispatch('getNewsEvent');

articleArea.addEventListener('getNewsEvent',function() {
    updateArticle();
});
relatedArea.addEventListener('getNewsEvent',function() {
    updateRelated();
});

這兩種方式看起來差不多，使用第二種方式有什么優(yōu)勢呢？我查了一些資料，說是第二種方式能夠?qū)⑦壿嫿怦?，但我沒感覺出來，第一種方式的邏輯也是分開的，為什么就不好呢？
麻煩各位指點一下，有沒有這方面的代碼實例或者項目應(yīng)用場景，謝謝~

回答

編輯回答

毀了心

你上面的寫法是DOM0的事件綁定寫法。假設(shè)你在下面又用updateButton綁定click事件執(zhí)行一些操作。那么就會覆蓋掉你上面寫的

updateButton.click = function() {
    articleArea.update();
    relatedArea.update();
};

這些操作。
但是addEventListener是DOM2寫法?？梢越壎▋蓚€click事件，執(zhí)行兩種操作。（雖然你也可以把這兩個操作寫在一個方法中），addEventListener可以通過傳入第三個參數(shù)（布爾值）來讓事件是冒泡階段調(diào)用（false）還是捕獲階段調(diào)用（true），雖然這個單詞有點長，但是不管怎么看都要優(yōu)于DOM0的DOM事件寫法

2017年5月16日 16:30

編輯回答

青檸

其實也就是再用發(fā)布訂閱的設(shè)計模式啦

如果現(xiàn)在的場景不覺得方便那你可以思考下

假設(shè)每隔1秒就有一個文章加載進來更新需要調(diào)用不同的函數(shù)
那么你要在click 的事件里面再加很多執(zhí)行的函數(shù)
而是用發(fā)布訂閱的話你只要再文章加載的時候訂閱更新的事件就可以了

2017年1月12日 19:44

編輯回答

忘了我

第二種應(yīng)該叫做訂閱模式吧，就像微信公眾號，你關(guān)注某個之后，每次更新就會派發(fā)一個事件，然后關(guān)注者就會收到。

第一種是主動調(diào)用事件，第二種是被動被調(diào)用。不知道說的對不對，來個大神指教下

2018年1月22日 08:18

編輯回答

浪婳

簡單說，依賴倒置，1為生產(chǎn)者以來消費者，2為消費者依賴生產(chǎn)者。
復(fù)雜說，方法1生產(chǎn)者需要知道所有消費者的詳細(xì)信息，比如叫什么，比如怎么讓它更新，它需要獲取一個實例才能對消費者發(fā)出通知。這就意味著增加任何依賴都需要修改生產(chǎn)者原有代碼，如果生產(chǎn)者是一個公共庫，這種要求是完全做不到的。方法2變化發(fā)起方只需要發(fā)出一個通知就行了，不需要知道任何額外的不相關(guān)信息，而消費方只需要接收事件通知，不需要費盡心思讓生產(chǎn)者了解自己

2017年7月26日 05:13

編輯回答

玄鳥

這是解耦方式中事件驅(qū)動方式解耦。

主要用于對callback事件的解耦。也就是回調(diào)函數(shù)解耦

具體的好處從click事件就可以看出來，你看你現(xiàn)在可以在click事件中添加你自己的方法，那么這個方法是在用戶點擊的時候調(diào)用的，可以你卻可以在預(yù)先寫好的代碼中，補充click之后應(yīng)該做的事情。

你不用去修改系統(tǒng)源碼，就可以實現(xiàn)對這個button點擊事件的功能的補充，這就是解耦。

而這里，你的行為其實是固定的，就是想在點擊之后執(zhí)行updateArticle() 和 updateRelated()這兩個方法，所以我覺的這里通過自定義事件來實現(xiàn)其實沒太大必要，除非你覺的你需要給其他人留條路，也就是把getNewsupdate這個trigger提供給別人來使用，那么這個解耦就是有用的。

就比如 A 現(xiàn)在想在 getNewsupdate 時機調(diào)用updateArticle 和updateRelated，
然后B認(rèn)為，他有個方法updateTitle,也應(yīng)該在這個時機觸發(fā)。那么他就可以很輕松的添加updateTitle

2017年3月11日 13:25