Question

我正试图弄清楚当从页面中删除元素时如何执行一些js代码：

原型中的东西如：

$('custom-div').observe('remove', function(event) {
    // Handle the event
});

这样的事情是否存在？

Answer 1

在现代浏览器中，您可以使用MutationObserver。这个代码会在DOM元素从当前位置删除时调用回调：

function watchRemove(el, fn) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var item;
            if (mutation.type === "childList" && mutation.removedNodes) {
                for (var i = 0; i < mutation.removedNodes.length; i++) {
                    item = mutation.removedNodes[i];
                    if (item === el) {
                        // clear the observer
                        observer.disconnect();
                        fn.call(item, item);
                        break;
                    }
                }
            }
      });    
    });
    observer.observe(el.parentNode, {childList: true});
    return observer;
}

并且，一个有效的演示：http://jsfiddle.net/jfriend00/naft3qeb/

这会监视父级对其直接子级的更改，并在传入的特定DOM元素被删除时调用回调。

当删除DOM元素或watchRemove()返回可以随时调用.disconnect()的观察者实例以停止观看时，观察者将自行删除。

这是一个使用此功能的jQuery插件：

jQuery.fn.watchRemove = function(fn, observers) {
    return this.each(function() {
        var o = watchRemove(this, fn);
        if (observers) {
            observers.push(o);
        }
    });
}

在这种情况下，它接受一个可选的数组对象作为参数，该参数将填充所有观察者对象（如果您希望能够在任何给定项目上停止观察，则只需要传递此对象）。

prototype - 从DOM中删除元素时的触发事件

1 个答案: