有没有办法用纯JS为mouseenter事件类型添加'live'事件监听器

Question

我正在尝试在纯 JavaScript 中添加实时版本的事件侦听器来监视 mouseenter 事件，以便每次用户在特定元素上输入鼠标时执行特定功能。

这是我所拥有的，但它并没有持续监控 mouseenter:

const selector = document.querySelector('#selectorId');

if (selector) {
    selector.addEventListener('mouseenter', e => {
        e.stopPropagation();
        myFunc();

    }, false);
}

目标是即使在 DOM 更新后继续收听此事件

有什么想法吗？

Answer 1

嗯，经过一些研究我得出结论，使用变异观察器是一种可行的方法。

这是一个我很满意的解决方案，适用于遇到同样问题的任何其他人：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    const observer = new MutationObserver(function (mutations, observer) {
        // fired when a mutation occurs
        (function () {
            const selector = document.querySelector('#selectorId');
        
            if (selector) {
                selector.addEventListener('mouseenter', e => {
                    e.stopPropagation();
                    alert('bbb');
        
                }, false);
            }
        })();
    });

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

感谢@apsillers 在以下线程中提供的有用技巧：Is there a JavaScript / jQuery DOM change listener?

有没有办法用纯JS为mouseenter事件类型添加'live'事件监听器

Is there a way to add 'live' Event listener for mouseenter event type with pure JS

javascript

event-handling

dom-events

mouseevent