Implementing a "change" Event for Typical Element Nodes using jQuery
<p>I would really like a way to observe changes to a node and trigger functions based on those changes.</p>

<p>I'm going to define "changes" as:</p>

<ul>
<li>Attribute edits/additions/deletions to a node and all descendants.</li>
<li>Text node edits/additions/deletions inside a node and all descendants.</li>
<li>Events bound/unbound to a node and all descendents.</li>
<li>The addition/deletion of a descendant.</li>
<li>CSS changes to a node and all descendents.</li>
<li>The deletion of a node.</li>
</ul>

<p>Now maybe I'm going about this the wrong way, but my thought was to doctor the pre-existing jQuery methods that are responsible for modifications like those listed above, and add some code that triggers an event on all of the nodes in the set, and their ancestors (simulating a bubbling event).</p>

<p>Something like this:</p>

<pre><code>$.fn.attrMOD = $.fn.attr;

$.fn.attr = function() {
    this.each(function(){
        $.fn.trigger.call($(this).parents().add(this), 'modify', { changeType: 'attr', originalTarget: $(this) });
    });

    return $.fn.attrMOD.apply(this, arguments);
};
</code></pre>

<p>And I would do this for many of the methods (css, bind, unbind, etc).</p>

<p>So to subscribe to this "modify" event, you would do something like:</p>

<pre><code>$('div').bind('modify', function() { console.log('Div was modified') })

//this would trigger it
$('div').attr('hello', 'world');
</code></pre>

<p>So a couple of questions:</p>

<ul>
<li>Am I crazy to try this?</li>
<li>Am I going about this the right way?  Keep in mind the code above isn't close to final, but that is my general idea.</li>
</ul>

<p>Thanks for reading!</p>

<p><strong>EDIT:</strong></p>

<p>For those of you that might be interested, I did get this to work, however the performance penalty is pretty bad when you have so many events bubbling up the DOM.  In many cases, the execution time doubled, and that's without any nodes subscribing.  If you're still interested, I put up a snippet <a href="http://codeviewer.org/view/code%3Aa53" rel="nofollow">here</a> [codeviewer.org].  It does not contain all the necessary modifications to meet all the requirements I listed above, but the rest can be added.</p>
