javascript - Is it possible to re-create a "onClick event" using custom events in javascript?

Question

I'm trying to learn about custom events and I got curious. Could you create the onClick event verbatim but written in a Custom Event?

ex. create an element:

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

Create a custom event that is the same as click event?

obj = document.getElementById('clicky');

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


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

obj.dispatchEvent(event);

Heres a JSFiddle

Answer 1

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

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

========== 更多详情 =========

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

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