[Javascript] 自定义事件文档onContentChange


Answers

我来了稍微修改版本,似乎工作正常,我达到的目的。 需要优化.on()方法扩展,所以请随时分享您的反馈意见。

受此启发: https//groups.google.com/forum/?fromgroups=#!topic/ jquery-dev/ ZaMw2XB6wyM

感谢Wil Stuckey

这里jsFiddle

;(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);
Question

这里jsFiddle来测试样品

我目前正在写一个jQuery的片段,以处理任何jQuery的domManip函数(扩展一些功能)“触发”DOM中的任何HTML内容的变化。 不知道这是做这件事的最好方法,所以任何建议都会受到欢迎。 如果绑定到文档,此代码段按预期工作。 但是,如果我尝试绑定到一个特定的元素,我面临着一些功能如.remove()的问题 。 也许这是由于自定义事件不使用正常的传播行为,但我真的不知道。

这是一个工作示例,我绑定'contentChange'事件文档,作品跨浏览器,我可以测试它:{火狐,Win9下的IE9,Chrome浏览器和Safari}

;
(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');

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

期待这一行将自定义事件泡泡为'#test':

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

有什么办法来触发这个自定义事件绑定到一个特定的元素时,操纵这个元素和/或其子?