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