鍍金池/ 問答/HTML/ js 事件綁定怎么寫和處理更好？

js 事件綁定怎么寫和處理更好？

在main script中
我們會對一些不包含業(yè)務(wù)的小方法和處理過程之類的事情做函數(shù)封裝
但是我一直對于事件綁定的位置和處理不是很清晰

有什么好的辦法或者行為能夠處理事件綁定的情況
之前的做法是

// main script

function showError(el){
    el.addEventListener('click',()=>{
        alertInfo('錯誤提示')
    })
}
function init(){
    showError(document.querySelector('.showErrorBtn'))
}

但是隨著事件的變多 導(dǎo)致init函數(shù)太多這樣的方法而變得冗長 不便于查看
而且事件回調(diào)里面也會夾雜dom操作 其實也不會把這個函數(shù)變得純
有什么方法處理這種事情

回答
編輯回答
放開她
  1. 你要在函數(shù)里面對DOM進(jìn)行操作，肯定不會純了。你可以把數(shù)據(jù)處理的邏輯抽出來作為一個純函數(shù)函數(shù)，然后再把DOM操作的邏輯從回調(diào)函數(shù)中抽出來，這樣的話便于代碼的維護(hù)；
  2. 你可以使用事件委托，把讓父元素收集事件，并且根據(jù)事件類型和event.target來區(qū)分是哪個子元素觸發(fā)的事件，再來決定要執(zhí)行的邏輯。極端點的話，把事件全部委托到document上

希望能夠幫助到你：）

2017年4月14日 21:01
編輯回答
薔薇花

你需要回調(diào)設(shè)置一個回調(diào)函數(shù)

showError(document.querySelector('.showErrorBtn'), function () {
    alert(this)
})
2018年5月19日 14:53
編輯回答
玩控

可以把這些錯誤事件代理到一個更上層的元素上，比如document，然后把要處理的邏輯都封裝進(jìn)那個代理函數(shù)里面

2017年6月12日 18:59
編輯回答
痞性

我很難從你代碼中看出你這封裝的意義何在?

  你都封裝showError函數(shù)了 為什么還多出個init函數(shù) 來調(diào)用showError函數(shù)
  直接調(diào)用showError函數(shù)傳參不就好了嗎?
  多這一步意義何在
2017年5月3日 02:18