Tôi có một phụ huynh <div> với một đứa trẻ <div> trong bộ nhớ - không được đính kèm với tài liệu hiện tại. Tôi muốn kích hoạt một số CustomEvent trên đứa trẻ nhưng lắng nghe sự kiện đó từ cha mẹ. Đây là mã của tôi:Tại sao sự kiện bubbling không hoạt động trong các phần tử DOM tách rời?
var parent = document.createElement('div');
var child = document.createElement('div');
parent.appendChild(child);
parent.addEventListener('boom', function(event) {
console.log('parent listener', event); // <~ This never runs!
});
var event = new CustomEvent('boom', { bubbles: true });
child.dispatchEvent(event);
Mã này không hoạt động như mong đợi. Trình nghe sự kiện trên phụ huynh không bao giờ kích hoạt. Điều này có vẻ là một mâu thuẫn với hệ thống sự kiện JavaScript, theo đó các sự kiện phát sinh từ mục tiêu. Tuy nhiên, nếu tôi sửa đổi hai dòng cuối cùng của đoạn này để sau, đám cháy callback như tôi mong chờ nó:
document.body.appendChild(parent);
child.dispatchEvent(event);
Nói cách khác, nếu tôi gắn mảnh của tôi như là một cây con của tài liệu trước khi cử sự kiện, sau đó trình nghe sự kiện cha mẹ kích hoạt chính xác như mong đợi. Tại sao? Có cách nào để cho phép sủi bọt khi sử dụng các phần tử DOM tách rời không?
Tôi không thấy bất kỳ DOM ảo nào ở đây, DOM ảo thường có nghĩa là DOM không thực sự DOM - DOM của bạn ở đây rất thực tế, chỉ cần tách ra. –
Ngoài ra, đây là giải pháp https://medium.com/@webprolific/bubbling-events-in-detached-dom-trees-35c34b551723, nếu điều này giải quyết được vấn đề cho bạn, vui lòng viết câu trả lời cho khách truy cập trong tương lai :) –
@RobG đó là mô hình đối tượng tài liệu, nó thể hiện cách bạn tương tác với các tài liệu thông qua một API đối tượng, một phần tử với một đứa trẻ chắc chắn là một đối tượng chỉ định tương tác với tài liệu và tài liệu không chỉ là cây dom. AJAX và như vậy cũng là một phần của API DOM và do đó là các webworker. –