在addEventListener時爲具名函數傳遞參數

  泡麪最近在作一個基於Vue的組件，之間要用到經過addEventListener綁定鼠標事件，但遇到一個比較噁心的問題。就是
須要在綁定匿名函數時候傳遞參數，固然，這個很容易，可是當你要動態移除掉這個匿名函數時就很麻煩了。

原由

有以下代碼:

// bind event
element.addEventListener('click', _bindEventHandler)
// unbind event
element.removeEventListener('click', _bindEventHandler)

我若是在使用具名函數傳遞參數呢？ 固然能夠這樣：

element.addEventListener('click', function() {
  _bindEventHandler(param1, param2)
})

但，這樣有個問題就是，我若是再想同步的移除該綁定事件，那就沒法移除了，由於沒有函數名稱，咱們在移除的時候沒法直接進行經過removeEventListener進行移除。那有沒有什麼辦法能夠讓我即能順利移除它，還能不使用匿名函數傳參數呢？

分析與解決

So，泡麪這裏想到了一個曲線救國的辦法，那就是將參數直接綁定在element上，由於咱們在使用具名函數時，addEventListener會靜默將事件的event傳遞給函數。所以當咱們再想找回這些參數，咱們就能夠直接經過event.target來獲取。

// 設置參數
element._params = { param1, param2 }
// 綁定事件
element.addEventListener('click', _bindEventHandler)
// 在函數中獲取參數
function _bindEventHandler(event) {
  const params = event.target._params
  // ...do sth after
}

OK，這樣咱們就實現了參數的傳遞， 同時也能夠很方便的移除綁定事件了！ 是否是很開心？

one more thing

有個問題，當我綁定的element事件遇到事件委託時，就須要額外處理一下。例如咱們在綁定一個有層級結構的按鈕或者DOM時，
當點擊內部的DOM，咱們會沒法獲取到在實際綁定事件的DOM上設置的參數。
這裏咱們就須要經過遍歷事件綁定的對象來獲取參數了。

咱們能夠經過 event.path(event.composedPath())來獲取Dom上的參數