如何在 dom 节点移除、属性修改时添加监听器？

Posted 2023-05-09

【中文标题】如何在 dom 节点移除、属性修改时添加监听器？

【英文标题】：How to add listeners on dom node removal, attribute modifications?

【发布时间】：2013-03-26 03:27:09

【问题描述】：

我想在 dom 节点添加/删除和属性修改上添加一个监听器，因为我主要为模块动态生成 dom 元素。

正如您在下图中看到的，webkit 成功了，因此这意味着这些侦听器存在。

如果有jQuery函数请告知。

谢谢。

【参考方案1】：

实际上，你不能指望 javascript 有一个方法或侦听器来处理 webkits 开发工具可以做的任何事情。它是一个内置调试器和控制台，可以超越。

但是，有一些称为 Mutation Events 可用，请参阅MDN

一个典型的调用看起来像

document.getElementsById( 'foo' ).addEventListener('DOMAttrModified', function( e ) 
, false);

它会触发任何来自 id 为 foo 的 Node 的属性更改。需要注意的是，突变事件已被弃用，将来可能无法以当前形式提供。

【讨论】：

+1。可能值得一提的是，替换 DOM 突变事件的 API 是 MutationObserver。新 API 仍涵盖属性更改。此外，IE

【参考方案2】：

对于属性更改事件，您可以尝试类似this。

$el.on('attribute:change', function () ...);
$el.attr('selected', 'selected').trigger('attribute:change');

对于添加/删除事件，您可以执行 this 之类的操作：

(function() 
    var ev = new $.Event('remove'),
    orig = $.fn.remove;

    $.fn.remove = function() 
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    
)();