Question

我有一个骰子游戏，并且有一个函数rollDice（）用于掷骰子，每次调用它都会在文档上触发一个自定义事件rollDice。

const rollDice = () => {
  document.dispatchEvent(
    new CustomEvent('rollDice', {
      detail: { value: Math.floor(Math.random() * 6) + 1  },
      bubbles: true,
      cancelable: false
    })
  );
};

我有一个按钮，可监听click事件并在每次单击时调用rollDice（）函数

<button id="roll-button"><span class="dice">&#9858;</span></button>

var element = document.getElementById('roll-button');
element.addEventListener('click', rollDice);

每当调用rollDice（）函数时，我应该侦听在文档上触发的自定义'rollDice'事件。检查触发的事件并获取滚动的当前值（detail.value）。我不仅不确定如何在每次单击按钮时一起使用click事件和自定义事件来获得骰子值。

Answer 1

为您的自定义事件添加事件监听器。

const rollDice = () => {
  document.dispatchEvent(
    new CustomEvent('rollDice', {
      detail: { value: Math.floor(Math.random() * 6) + 1  },
      bubbles: true,
      cancelable: false
    })
  );
};

document.addEventListener('rollDice', function (evt) {
  console.log(evt.detail.value);
});


var element = document.getElementById('roll-button');
element.addEventListener('click', rollDice);

<button id="roll-button"><span class="dice">&#9858;</span></button>

最后，不确定为什么需要自定义事件。好像调用一个函数会更容易。

自定义事件触发

1 个答案: