时间戳

首页 > 解决方案 > 有没有办法优化“addEventListener”代码块？

javascript - 有没有办法优化“addEventListener”代码块？

问题描述

在 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);

标签： javascript

解决方案

解决此问题的一种方法是查看外部事件侦听器的事件目标。

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);

虽然这确实需要从罗马数字映射到常规数字，但这样您只需添加一个事件侦听器！

推荐阅读