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