資訊專欄INFORMATION COLUMN
摘要：泡面最近在做一個(gè)基于的組件，之間要用到通過綁定鼠標(biāo)事件，但遇到一個(gè)比較惡心的問題。就是需要在綁定匿名函數(shù)時(shí)候傳遞參數(shù)，當(dāng)然，這個(gè)很容易，但是當(dāng)你要?jiǎng)討B(tài)移除掉這個(gè)匿名函數(shù)時(shí)就很麻煩了。
??泡面最近在做一個(gè)基于Vue的組件，之間要用到通過addEventListener綁定鼠標(biāo)事件，但遇到一個(gè)比較惡心的問題。就是
需要在綁定匿名函數(shù)時(shí)候傳遞參數(shù)，當(dāng)然，這個(gè)很容易，但是當(dāng)你要?jiǎng)討B(tài)移除掉這個(gè)匿名函數(shù)時(shí)就很麻煩了。
有如下代碼:
// bind event
element.addEventListener("click", _bindEventHandler)
// unbind event
element.removeEventListener("click", _bindEventHandler)
我如果在使用具名函數(shù)傳遞參數(shù)呢？ 當(dāng)然可以這樣：
element.addEventListener("click", function() {
_bindEventHandler(param1, param2)
})
但，這樣有個(gè)問題就是，我如果再想同步的移除該綁定事件，那就無法移除了，因?yàn)闆]有函數(shù)名稱，我們在移除的時(shí)候無法直接進(jìn)行通過removeEventListener進(jìn)行移除。那有沒有什么辦法可以讓我即能順利移除它，還能不使用匿名函數(shù)傳參數(shù)呢？
分析與解決So，泡面這里想到了一個(gè)曲線救國的辦法，那就是將參數(shù)直接綁定在element上，因?yàn)槲覀冊谑褂镁呙瘮?shù)時(shí)，addEventListener會(huì)靜默將事件的event傳遞給函數(shù)。因此當(dāng)我們再想找回這些參數(shù)，我們就可以直接通過event.target來獲取。
// 設(shè)置參數(shù)
element._params = { param1, param2 }
// 綁定事件
element.addEventListener("click", _bindEventHandler)
// 在函數(shù)中獲取參數(shù)
function _bindEventHandler(event) {
const params = event.target._params
// ...do sth after
}
OK，這樣我們就實(shí)現(xiàn)了參數(shù)的傳遞， 同時(shí)也可以很方便的移除綁定事件了！ 是不是很開心？
one more thing有個(gè)問題，當(dāng)我綁定的element事件遇到事件委托時(shí)，就需要額外處理一下。例如我們在綁定一個(gè)有層級結(jié)構(gòu)的按鈕或者DOM時(shí)，
當(dāng)點(diǎn)擊內(nèi)部的DOM，我們會(huì)無法獲取到在實(shí)際綁定事件的DOM上設(shè)置的參數(shù)。
這里我們就需要通過遍歷事件綁定的對象來獲取參數(shù)了。
我們可以通過event.path(event.composedPath())來獲取Dom上的參數(shù)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103873.html
摘要：案例持續(xù)觸發(fā)事件時(shí)，并不立即執(zhí)行函數(shù)，當(dāng)毫秒內(nèi)沒有觸發(fā)事件時(shí)，才會(huì)延時(shí)觸發(fā)一次函數(shù)。也以函數(shù)形式暴露普通插槽。這樣的場景組件用函數(shù)式組件是非常方便的。相關(guān)閱讀函數(shù)式組件自定義指令前言 有echarts使用經(jīng)驗(yàn)的同學(xué)可能遇到過這樣的場景，在window.onresize事件回調(diào)里觸發(fā)echartsBox.resize()方法來達(dá)到重繪的目的，resize事件是連續(xù)觸發(fā)的這意味著echarts...
摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...
摘要：除了監(jiān)聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個(gè)直接訪問子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用。將和合并成，會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。 查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！ 組件詳解 組件與復(fù)用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-com...
摘要：前言本文主要介紹屬性事件和插槽這三個(gè)基礎(chǔ)概念使用方法及其容易被忽略的一些重要細(xì)節(jié)。至于如何改變，我們接下去詳細(xì)介紹單向數(shù)據(jù)流這個(gè)概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個(gè)核心思想是數(shù)據(jù)驅(qū)動(dòng)。 前言 本文主要介紹屬性、事件和插槽這三個(gè)vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件，也可以從這三個(gè)部分展開，它們...
摘要：在及之前版本，只擁有函數(shù)作用域，沒有塊作用域和除外。函數(shù)表達(dá)式分為匿名函數(shù)表達(dá)式和具名函數(shù)表達(dá)式。但是，由于這個(gè)事件回調(diào)函數(shù)形成了一個(gè)覆蓋當(dāng)前作用域的閉包，引擎極有可能依然保存著這個(gè)數(shù)據(jù)結(jié)構(gòu)取決于具體實(shí)現(xiàn)?？偨Y(jié)函數(shù)是中最常見的作用域單元。 在 ES5 及之前版本，JavaScript 只擁有函數(shù)作用域，沒有塊作用域（with 和 try...catch 除外）。在 ES6 中，JS 引...
閱讀 2574·2021-09-09 09:33
閱讀 2940·2019-08-30 15:56
閱讀 3209·2019-08-30 14:21
閱讀 964·2019-08-30 13:01
閱讀 958·2019-08-26 18:27
閱讀 3661·2019-08-26 13:47
閱讀 3534·2019-08-26 10:26
閱讀 1659·2019-08-23 18:38
