javascript - 添加多个事件监听器的更聪明的方法？

Question

为了开始使用我一直在学习的 javascript 技能，我创建了一个页面，您可以在其中单击 1-5 的数字，它们会慢慢消失。有没有更好的编码方法而不是在彼此之间列出事件侦听器？

 const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
const four = document.querySelector(".four");
const five = document.querySelector(".five");

one.addEventListener('click', e => {
one.remove();
two.addEventListener('click', e => {
  two.remove();
  three.addEventListener('click', e => {
    three.remove();
    four.addEventListener('click', e => {
      four.remove();
      five.addEventListener('click', e => {
        five.remove();
        });
      });
    });
  });
});

标签： javascript

Answer 1

使侦听器对等并添加一些数据以保持下一个必须单击的状态...

let listenTo = 1

one.addEventListener('click', e => {
  if (listenTo === 1) {
    listenTo = 2
    // fade away code
  }
})

two.addEventListener ...

这些可以在一个循环中设置，也可以像这样......

// give the elements id="zero", etc in the markup
let ids = [ "zero", "one", "two" ... ]
let listenTo = "zero"

let listeners = ids.map((id, index) => {
  let el = document.getElementById(id)
  return el.addEventListener('click', e => {
    if (listenTo === id) {
      listenTo = index < ids.length-1 ? ids[index+1] : null
      // fade away code
    }
  })
})