jquery - DOM 変更の JavaScript イベント

Question

画像などのデータを div に追加する場合、どうすればイベント関数を起動できますか?

Web ページに html を追加する Jquery 関数がいくつかあります。このデータを処理する関数を呼び出したい

イベントはありますか？または、コンテンツが追加された場合にカスタムコードを実行するにはどうすればよいですか?

ありがとう

Answer 1

デフォルトの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 2

あなたが話していることは、Domの変更の監視と呼ばれています

ここを見たいと思うかもしれません: http://www.quirksmode.org/js/events/DOMtree.html

その主題に関する別のスタックオーバーフローの質問もあります：DOMの変更を検出/監視する最も効率的な方法は?

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 のネイティブ メソッドをオーバーライドしないようにすることもできます (これは実際には良い方法ではなく、すべてのブラウザーで許可されているわけではありません)。あなたはそれをします）。私はそれをどのように行うことができるかについての主な概念を示しているだけです。

上記のコードはテストしていないことに注意してください。アイデアを示すためだけに書いたものです。