Javascript 自定义事件文档onContentChange

我目前正在编写一个jquery代码段，以处理任何jquery domManip函数（扩展某些函数）在DOM中“触发”的html内容更改。我不确定这是最好的方法，所以欢迎提供任何建议。 如果绑定到文档，则此代码段可以正常工作。然而，如果我试图将它绑定到一个特定的元素，我将面临一个问题，即一些函数作为.remove（）。可能是因为自定义事件没有使用正常的传播行为，但我真的不确定

这是一个工作示例，我将“contentChange”事件绑定到文档，跨浏览器工作，因为我可以测试它：{Firefox、IE9、Chrome和Safari在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');

但现在，对self或children调用

remove（）

方法不会触发我的自定义事件。 我可以理解，如果我删除元素，事件回调函数将不会被调用，但为什么在删除子元素时不调用它（如果绑定到文档，它将工作！）

我希望这一行生成自定义事件气泡以进行“测试”：

---

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

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

---

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

我附带了一个稍微修改过的版本，它似乎可以很好地满足我的目的。 需要对扩展的

.on（）

方法进行优化，因此请随时分享您的反馈

灵感来自这里：

多亏了威尔·斯塔基

---

$.event.trigger（'contentChange'）

不应该触发元素上的事件吗？比如被操纵的那个？旁注，这是livequery用来获得类似效果的技术，我建议研究livequery是如何做到这一点的，以获得可能的改进。为什么不像您所说的那样使用@alexP，我无法捕获删除元素上的事件。这就是我要找的。将$.event.trigger（'contentChange'）与$（document）.contentChange（）一起使用，即使从DOM中删除了元素，也会触发事件。据我所知，这是因为使用了$.event，但我无法指定元素。我在找$（'#test'）。contentChange（）被触发，即使元素或子元素被删除。甚至像这样：返回sender.trigger（'contentChange'）、oFct.apply（sender，args）；它不适用于儿童（但适用于自我元素）。@但是。。。为什么要将不影响文档的更改通知文档？但是，您可以检测元素是否是文档的一部分，如果它不是，则会触发元素和文档上的事件。基本上，我希望在添加/删除元素时触发特定div的事件。如果将$（document）与$.event.trigger（'contentChange'）一起使用，而不将$（'#test'）与$.event.trigger（'contentChange'）一起使用，则这似乎是可行的。我不知道为什么？它不会在#test上触发，因为$.event.trigger（'contentChange'）与#test没有任何关系。在元素和文档上触发事件是没有意义的，这将导致文档接收事件两次，或者插件变得不那么有用，因为必须阻止事件传播，以防止文档两次接收事件。

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

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

;(function ($) {
    var fctsToObserve = {
        append: [$.fn.append, 'self'],
        prepend: [$.fn.prepend, 'self'],
        remove: [$.fn.remove, 'parent'],
        before: [$.fn.before, 'parent'],
        after: [$.fn.after, 'parent']
    }, fctsObserveKeys = '';
    $.each(fctsToObserve, function (key, element) {
        fctsObserveKeys += "hasChanged." + key + " ";
    });
    var oOn = $.fn.on;
    $.fn.on = function () {
        if (arguments[0].indexOf('hasChanged') != -1) arguments[0] += " " + fctsObserveKeys;
        return oOn.apply(this, arguments);
    };
    $.fn.hasChanged = function (types, data, fn) {
        return this.on(fctsObserveKeys, types, null, data, fn);
    };
    $.extend($, {
        observeMethods: function (namespace) {
            var namespace = namespace ? "." + namespace : "";
            var _len = $.fn.length;
            delete $.fn.length;
            $.each(fctsToObserve, function (key) {
                var _pre = this;
                $.fn[key] = function () { 
                    var target = _pre[1] === 'self' ? this : this.parent(),
                        ret = _pre[0].apply(this, arguments);
                    target.trigger("hasChanged." + key + namespace, arguments);
                    return ret;
                };
            });
            $.fn.length = _len;
        }
    });
    $.observeMethods()
})(jQuery);