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

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

圖片描述

我現(xiàn)在的實(shí)現(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ū)⑦壿嫿怦?，但我沒感覺出來，第一種方式的邏輯也是分開的，為什么就不好呢？
麻煩各位指點(diǎn)一下，有沒有這方面的代碼實(shí)例或者項(xiàng)目應(yīng)用場景，謝謝~

回答

編輯回答

毀了心

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

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

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

2017年5月16日 16:30

編輯回答

青檸

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

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

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

2017年1月12日 19:44

編輯回答

忘了我

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

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

2018年1月22日 08:18

編輯回答

浪婳

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

2017年7月26日 05:13

編輯回答

玄鳥

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

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

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

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

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

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

2017年3月11日 13:25