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

Question

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

Answer 1

解决此问题的一种方法是查看外部事件侦听器的事件目标。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);虽然这确实需要从罗马数字映射到常规数字，但这样您只需添加一个事件侦听器！

Answer 2

如果你真的想保持这样的代码逻辑并且只想重构，我会这样做：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 似乎很奇怪。