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

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

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

p.s。你从 fiddle 得到的错误是因为你没有定义你在 fakeClick 事件处理程序

中调用的函数 process

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

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

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

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

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

javascript

events

onclick

custom-events