如何捕獲自定義事件？

Question

我正在嘗試創建一個自定義事件並捕獲該事件。 這是我的簡化 HTML 和 JavaScript

 let parent = document.getElementById('parent'); let child = document.getElementById('child'); parent.addEventListener('custom-event', () => alert("parent"), true); child.addEventListener('custom-event', () => alert("child")); let event = new Event('custom-event'); parent.dispatchEvent(event);

 <div id="parent"> <p id="child"> Hello World </p> </div>

在這種情況下，我收到警報“父母”，但我沒有收到子彈出窗口。

但是，如果我嘗試使用已經存在的事件，如“點擊”，它會起作用。

 let parent = document.getElementById('parent'); let child = document.getElementById('child'); parent.addEventListener('click', () => alert("parent"), true); child.addEventListener('click', () => alert("child"));

 <div id="parent"> <p id="child"> Hello World </p> </div>

有什么方法/解決方法可以用來捕獲自定義事件嗎？

Answer 1

正如莫里茨所說，您需要在孩子身上觸發事件，因為它是最內部的元素。 這樣，事件就會冒泡到每個父母。 事件的target將始終是子元素，但事件的currentTarget將是當前元素，因為它沿着鏈向上移動。

您必須確保useCapture是true ，對於您希望為其拾取事件的祖先元素。 請參閱： EventTarget.addEventListener 。

useCapture

一個Boolean指示此類型的事件將在被分派到 DOM 樹中它下面的任何EventTarget之前被分派到已注冊的listener器。

通過樹向上冒泡的事件不會觸發指定使用捕獲的偵聽器。 事件冒泡和捕獲是傳播嵌套在另一個元素中的元素中發生的事件的兩種方式，當兩個元素都注冊了該事件的句柄時。 事件傳播模式確定元素接收事件的順序。 有關詳細說明，請參閱 DOM 級別 3 事件和 JavaScript 事件順序。 如果未指定， useCapture默認為false 。

如果從parent.addEventListener中刪除useCapture參數（第二個參數），則只有祖父母會跟隨孩子被接走。 它不會破壞鏈條，除非您取消孩子中的事件。

注意：如果要觸發非本地事件，最好使用CustomEvent構造函數。 同樣，如果需要，您可以直接調用構造函數。 這只是一個瀏覽器安全的包裝器。

 let grandParent = document.getElementById('x-grand-parent'); let parent = document.getElementById('x-parent'); let child = document.getElementById('x-child'); grandParent.addEventListener('custom-event', (e) => console.log(e.currentTarget.id), true); parent.addEventListener('custom-event', (e) => console.log(e.currentTarget.id), true); child.addEventListener('custom-event', (e) => console.log(e.currentTarget.id)); triggerCustomEvent(child, 'custom-event'); function triggerCustomEvent(el, eventName, options) { let opts = Object.assign({ canBubble: true, cancelable: true, detail: {} }, options); let event = null; if (window.CustomEvent && typeof window.CustomEvent === 'function') { event = new CustomEvent(eventName, { detail: opts.detail }); } else { event = document.createEvent('CustomEvent'); event.initCustomEvent(eventName, opts.canBubble, opts.cancelable, opts.detail); } el.dispatchEvent(event); }

 <div id="x-grand-parent"> <div id="x-parent"> <p id="x-child"> Hello World </p> </div> </div>

Answer 2

嘗試在子節點上調度事件，您將收到兩個警報。

 let parent = document.getElementById('parent'); let child = document.getElementById('child'); parent.addEventListener('custom-event', () => alert("parent"), true); child.addEventListener('custom-event', () => alert("child")); let event = new Event('custom-event'); child.dispatchEvent(event);

 <div id="parent"> <p id="child"> Hello World </p> </div>