<h1 id="elem">Hello for John!</h1>

<script>
  // تأتي المزيد من التفاصيل مع الحدث إلى المعالج
  elem.addEventListener("hello", function(event) {
    alert(event.detail.name);
  });

  elem.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "John" }
  }));
</script>