亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

有沒有辦法優化“addEventListener”代碼塊?

有沒有辦法優化“addEventListener”代碼塊?

瀟湘沐 2021-10-07 20:11:39
在 HTML 頁面中,我有 7 個按鈕帶有以下 ID:#I、#II、#III、#IV、#V、#VI、#VII放置在rContainer div 中。我想設置與觸摸按鈕相關的iActiveButton變量。我的代碼似乎工作正常,但我覺得它可以增強和縮短。任何的想法?var iActiveButton;function touchHandler(){  console.log(iActiveButton);}rContainer.addEventListener("touchstart", function(){  I.addEventListener("touchstart", function(){iActiveButton = 1;}, false);  II.addEventListener("touchstart", function(){iActiveButton = 2;}, false);  III.addEventListener("touchstart", function(){iActiveButton = 3;}, false);  IV.addEventListener("touchstart", function(){iActiveButton = 4;}, false);  V.addEventListener("touchstart", function(){iActiveButton = 5;}, false);  VI.addEventListener("touchstart", function(){iActiveButton = 6;}, false);  VII.addEventListener("touchstart", function(){iActiveButton = 7;}, false);  touchHandler();}, false);
查看完整描述

2 回答

?
繁花不似錦

TA貢獻1851條經驗 獲得超4個贊

解決此問題的一種方法是查看外部事件偵聽器的事件目標。


rContainer.addEventListener("touchstart", function(event){

  const targetId = event.target.getAttribute('id');


  // don't set iActiveButton if you clicked empty space inside `rContainer`

  if (targetId) {

    // romanNumeralMap looks like { 'I': 1, 'II': 2, etc... }

    iActiveButton = romanNumeralMap[targetId];

  }


  touchHandler();

}, false);

雖然這確實需要從羅馬數字映射到常規數字,但這樣您只需添加一個事件偵聽器!


查看完整回答
反對 回復 2021-10-07
?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

如果你真的想保持這樣的代碼邏輯并且只想重構,我會這樣做:


const buttonArray = [I, II, III, IV, V, VI, VII];

rContainer.addEventListener("touchstart", function(){

  buttonArray.forEach((button, index) => {

    button.addEventListener("touchstart", function(){iActiveButton = index;}, false);

  }


  touchHandler();

}, false);

但我完全同意這些評論,在每個事件上添加新的 EventListeners 似乎很奇怪。


查看完整回答
反對 回復 2021-10-07
  • 2 回答
  • 0 關注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號