触发的自定义事件答案

【问题标题】：Custom Events Triggered触发的自定义事件
【发布时间】：2020-10-03 03:16:30
【问题描述】：

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

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

我有一个按钮，它监听点击事件并在每次点击时调用 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）。我不只是确定如何在每次单击按钮时一起使用单击事件和自定义事件来获取骰子值。

【问题讨论】：

你在哪里监听自定义事件？
如果您的意思是自定义事件，它在函数 rollDice() 内调度。
代码document.addEventListener('rollDice', function (evt) {.... });在哪里？您正在触发该事件，您在哪里使用它？不确定您的实际问题是什么。
根本没有那个代码，这就是我遇到的问题。我不知道如何同时使用事件监听器和点击事件来获取值。
所以使用 addEventListener.....

标签： javascript

【解决方案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);

&lt;button id="roll-button"&gt;&lt;span class="dice"&gt;&amp;#9858;&lt;/span&gt;&lt;/button&gt;

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

【讨论】：

是的，只是想以这种方式练习会更容易，但感谢您的帮助。