如何在 Javascript 中创建自定义事件？ [关闭]

Question

我想制作自己的 Javascript 事件。有没有可能像点击、悬停一样创建我自己的事件。我想要一个真正有效的活动。就像创建一个在用户单击取消/删除按钮时触发的事件。

Answer 1

见https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent和https://davidwalsh.name/customevent

var myElement = document.querySelector('p');

myElement.addEventListener("userLogin", function(e) {
  console.info("Event is: ", e);
  console.info("Custom data is: ", e.detail);
});

var myEvent = new CustomEvent("userLogin", {
  detail: {
    username: "davidwalsh"
  }
});

// Trigger it!
myElement.dispatchEvent(myEvent);

<p>Custom Event Element</p>

Answer 2

在 JavaScript 中创建一个事件监听器需要做两件事：(1) 选择一个元素来“绑定”一个监听器和 (2) 添加一个事件监听器：

// add event listener to table
var el = document.getElementById("#myElement");
el.addEventListener("click", function() {
  alert('element clicked!');
});

当 ID 为 myElement 的元素被单击时，此特定实现将运行该函数。

查看event listeners 上的 MDN 页面了解更多信息。

---

由于问题是关于“自定义”事件，您可以通过以下方式创建自定义 JavaScript 事件。

var event = new Event('build');

// Listen for the event.
var el = document.getElementById("#myElement");
el.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
el.dispatchEvent(event);

您可以阅读更多关于自定义 JS 事件here。