是否可以使用 javascript 中的自定义事件重新创建“onClick 事件”？

Question

我正在尝试了解custom events，我很好奇。您可以逐字创建 onClick 事件但写在自定义事件中吗？

ex. 创建一个元素：

<h1 id="clicky">click here</h1>

创建一个和点击事件一样的自定义事件？

obj = document.getElementById('clicky');

obj.addEventListener("fakeClick", function(e) { console.log(e.detail) });


var event = new CustomEvent("fakeClick", {
  detail: {
    hazcheeseburger: true
  }
});

obj.dispatchEvent(event);

这是JSFiddle

Answer 1

这取决于您将其设置为“与点击事件相同”的意思。 当您调用 dispatchEvent 时，自定义事件会触发到相应的 Dom 元素（就像您在上面所做的那样）。所以基本上如果你dispatch自定义事件在点击事件处理程序中，那么它基本上模拟点击事件，但似乎没有太多理由这样做。

附言你从小提琴得到的错误是因为你没有定义你在fakeClick事件处理程序中调用的函数process

==========更多细节=========

我的意思是您可以通过以下方式使用自定义事件来“模拟”点击事件，但这实际上并没有达到目的，因为您可以直接使用浏览器点击事件。

var event = new CustomEvent("fakeClick", {
  detail: {
    hazcheeseburger: true
  }
});

obj = document.getElementById('clicky');

obj.addEventListener("click", function () {
    this.dispatchEvent(event);
});

obj.addEventListener("fakeClick", function(e) { console.log(e.detail) });