這兩天遇到一個(gè)問(wèn)題翰撑，循環(huán)出來(lái)的組件，添加了相同的監(jiān)聽(tīng)事件‘click’啊央，但當(dāng)click事件觸發(fā)的時(shí)候眶诈，會(huì)執(zhí)行好幾次處理action的方法。很明顯這是一個(gè)問(wèn)題瓜饥，我們想要的是就算同一個(gè)組件添加多次監(jiān)聽(tīng)事件逝撬，但在監(jiān)聽(tīng)到的事件執(zhí)行時(shí)，也只是觸發(fā)一次action方法乓土。從網(wǎng)上找到了一些解決辦法宪潮，在這里記錄下來(lái)。
- 下面是我模擬問(wèn)題寫(xiě)的偽代碼
function handleAction (event) {
console.log('im action', event);
}
var btn = document.getElementById('button');
btn.addEventListener('click', event => handleAction(event), false);
btn.addEventListener('click', event => handleAction(event), false);
像上面這樣處理函數(shù)趣苏，在控制臺(tái)打印出來(lái)的結(jié)果是兩次坎炼，但我們不想要它打印兩次，我們想不管監(jiān)聽(tīng)?zhēng)状卫辜谟|發(fā)事件執(zhí)行的時(shí)候，只執(zhí)行一遍handleAction 函數(shù)檩淋。
- 從網(wǎng)上找了一些資料芬为，也有人遇到相同的問(wèn)題，以下是解決方案蟀悦。
function handleAction (event) {
console.log('im action', event);
}
var newHandle = function (event) {
handleAction(event);
}
var btns = document.getElementById('btn');
btns.addEventListener('click', newHandle, false);
btns.addEventListener('click', newHandle, false);
只需要將函數(shù)重新包裝一下媚朦，用一個(gè)變量接收一個(gè)匿名函數(shù)，達(dá)到一個(gè)閉包的效果日戈。
參考鏈接 hope help
