javascript - 自定义事件文档 onContentChange

Question

Here jsFiddle to test sample

我目前正在编写一个 jQuery 片段来处理由任何 jQuery domManip 函数(扩展某些函数)“触发”的 DOM 中的任何 html 内容更改。不确定这是最好的方法，因此欢迎任何建议。

如果绑定(bind)到文档，此代码段将按预期工作。但是，如果我尝试将它绑定(bind)到特定元素，我将面临某些函数作为 .remove() 的问题。可能是因为自定义事件没有使用正常的传播行为，但我真的不确定。

这是一个工作示例，我将 contentChange 事件绑定(bind)到文档，跨浏览器工作，因为我可以测试它:{Firefox、IE9、Chrome 和 Safari under Win7}

;
(function ($) {
    $.fn.contentChange = function (types, data, fn) {
        return this.on('contentChange', types, null, data, fn);
    };
    var oDomManip = $.fn.domManip,
        oHtml = $.fn.html,
        oEmpty = $.fn.empty,
        oRemove = $.fn.remove,
        extendFct = function (oFct, sender, args) {
            return oFct.apply(sender, args), $.event.trigger('contentChange');
            //=>if testing specific element (#test) use instead following line
             //return oFct.apply(sender, args), $(sender).trigger('contentChange');
        };
    $.fn.domManip = function () {
        extendFct(oDomManip, this, arguments)
    };
    $.fn.html = function () {
        extendFct(oHtml, this, arguments)
    };
    $.fn.empty = function () {
        extendFct(oEmpty, this, arguments)
    };
    $.fn.remove = function () {
        extendFct(oRemove, this, arguments)
    };
   
})(jQuery);

我使用:$.event.trigger('contentChange') 来触发自定义事件。

这样称呼:

$(document).contentChange(function () {
    console.log("onContentChange")
});

但是，如果我使用:

$('#test').contentChange(function () {
    console.log("onContentChange")
});

自定义事件未触发。因此，要在特定元素上触发自定义事件，我可以这样触发它:

$(sender).trigger('contentChange');

但是现在，对自己或 child 调用 remove() 方法不会触发我的自定义事件。我可以理解，如果我删除元素，事件回调函数将不会被调用，但为什么在删除子元素时不调用它(如果绑定(bind)到文档，它会工作!)？

我期待这条线为'#test'制作自定义事件气泡:

$('#test').find('div:first').remove();

在操作此元素和/或其子元素时，是否有任何方法可以触发此绑定(bind)到特定元素的自定义事件？

Answer 1

您需要在被修改的元素上触发事件。

http://jsfiddle.net/Gw4Lj/2/

return oFct.apply(sender, args), sender.trigger('contentChange');

但是，有了这个更改，您将不再捕获在未连接到 DOM 的元素上触发的事件，因为它不是该文档的后代，我认为这是可以的，因为它不是它与该 DOM 相关联，位于 DOM 片段中。