jquery - DOM 更改的 Javascript 事件

Question

如果我将图像之类的数据附加到 div，我如何触发事件函数？

我有一些将 html 附加到我的网页的 Jquery 函数。我想调用一个函数来处理这些数据

有活动吗？或者如果附加内容，我该如何做自定义代码？

谢谢

Answer 1

你所说的叫做监控 Dom 变化

你可能想看看这里：http ://www.quirksmode.org/js/events/DOMtree.html

关于该主题还有另一个堆栈溢出问题：检测/监控 DOM 更改的最有效方法？

Answer 2

您必须覆盖默认的 jQuery 追加功能并为追加添加触发器，然后您可以将处理程序绑定到它，如下所示：

$(function() {
    var originalAppend = $.fn.append;

    // override original append
    $.fn.append = function () {
        return originalAppend.apply(this, arguments).trigger("append");
    };
});

$("#myDiv").bind("append", function() { 
    // something was appended to #myDiv
    // code here
});

$("#myDiv").append("<img />");

Answer 3

您只能通过自己创建事件处理来管理自定义事件。例如，在您的情况下，我可以假设您每次调用 appendChild DOM 函数时都想触发一些事件。以下方式可能是一种可能的解决方案（如果我们谈论纯 JavaScript，但它提供了理解该概念的正确方法）：

function() {
    // of course it could be done better here to remove from array  but it's not the topic
    function removeItem( arr, item) {
        for(var i = 0, s = arr.length; i < s; i++){
            if(arr[i]==item){
                arr.splice( i, 1);
                break;
            }
        }
    };
    // our custom event object
    var MyDomEvents = {
        events = {},
        on : function( evt, handler) {
            this.events[evt] = this.events[evt] || [];
            this.events[evt].push( handler);
        },
        un : function( evt, handler) {
            if (this.events[evt]) {
                removeItem( this.events[evt], handler);
            }
        },
        fireEvent : function() {
           var evt = arguments[0], args = [];
           for (var i = 1, s = arguments.length; i < s; i++) {
               args.push( arguments[i]);
           }
           if (this.events[evt]) {
               for (var i = 0, s = this.events[evt].length; i < s; i++) {
                   if (this.events[evt][i] &&
                     this.events[evt][i].apply( this, args) == false) {
                       return ; // stop an event if it returns false
                   }
               }
           }
        }
    };

    // very dirty but maybe it's something you are looking for
    var orig = HTMLElement.prototype.appendChild;
    HTMLElement.prototype.appendChild = function( node) {
        orig.call( this, node);
        MyDomEvents.fireEvent( 'append', this, node);
    }

    // usage:
    MyDomEvents.on( 'append', function( parent, child) {
        // handle append event
    });
}();

当然，可以在 jQuery 的“append”方法上做类似的事情，或者你可以在代码中的任何地方使用自己的“append”方法来不覆盖 DOM 的原生方法（这真的不是一个好习惯，并不是所有的浏览器都可以让你做吧）。我只是展示了如何做到这一点的主要概念。

请注意，我没有测试上面的代码，我写它只是为了展示一个想法。