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

Question

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

例如。创建一个元素:

<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元素(就像您上面所做的那样)。因此，基本上，如果您在点击事件处理程序中调度自定义事件，那么它基本上会模拟点击事件，但似乎没有太多理由这样做。

附:您从 fiddle 得到的错误是因为您没有定义在 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) });