Is it possible to listen for changes to an object’s attributes in JavaScript?

As far as I know, there are no events fired on Object attribute changes (edit: except, apparently, for Object.watch).

Why not use event delegation wherever possible? That is, events on the form rather than on individual form elements, capturing events as they bubble up?

For instance (my jQuery is rusty, forgive me for using Prototype instead, but I’m sure you’ll be able to adapt it easily):

$(form).observe('change', function(e) {
    // To identify changed field, in Proto use e.element()
    // but I think in jQuery it's e.target (as it should be)
});

You can also capture input and keyup and paste events if you want it to fire on text fields before they lose focus. My solution for this is usually:

1. Gecko/Webkit-based browsers: observe input on the form.
2. Also in Webkit-based browsers: observe keyup and paste events on textareas (they do not fire input on textareas for some reason).
3. IE: observe keyup and paste on the form
4. Observe change on the form (this fires on selects).
5. For keyup and paste events, compare a field’s current value against its default (what its value was when the page was loaded) by comparing a text field’s value to its defaultValue

Edit: Here’s example code I developed for preventing unmodified form submission and the like:

What is the best way to track changes in a form via javascript?

You could attach a listener to a container (the body or the form) and then use the event parameter to react to the change. You get all the listener goodness but only have to attach one for the container instead of one for every element.

$('body').change(function(event){
    /* do whatever you want with event.target here */
    console.debug(event.target); /* assuming firebug */
 });

The event.target holds the element that was clicked on.

SitePoint has a nice explanation here of event delegation:

JavaScript event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.

Mozilla-engined browsers support Object.watch, but I’m not aware of a cross-browser compatible equivalent.

Have you profiled the page with Firebug to get an idea of exactly what’s causing the slowness, or is “lots of event handlers” a guess?

Small modification to the previous answer : by moving the observable code to an object, one can make an abstraction out of it and use it to extend other objects with jQuery’s extend method.

ObservableProperties = {
    events : {},
    on : function(type, f)
    {
        if(!this.events[type]) this.events[type] = [];
        this.events[type].push({
            action: f,
            type: type,
            target: this
        });
    },
    trigger : function(type)
    {
        if (this.events[type]!==undefined)
        {
            for(var e = 0, imax = this.events[type].length ; e < imax ; ++e)
            {
                this.events[type][e].action(this.events[type][e]);
            }
        }
    },
    removeEventListener : function(type, f)
    {
        if(this.events[type])
        {
            for(var e = 0, imax = this.events[type].length ; e < imax ; ++e)
            {
                if(this.events[type][e].action == f)
                    this.events[type].splice(e, 1);
            }
        }
    }
};
Object.freeze(ObservableProperties);

var SomeBusinessObject = function (){
    self = $.extend(true,{},ObservableProperties);
    self.someAttr = 1000
    self.someMethod = function(){
        // some code
    }
    return self;
}

See the fiddle : https://jsfiddle.net/v2mcwpw7/3/

jQuery is just amazing. Although you could take a look to ASP.NET AJAX Preview.

Some features are just .js files, no dependency with .NET. May be you could find usefull the observer pattern implementation.

var o = { foo: "Change this string" };

Sys.Observer.observe(o);

o.add_propertyChanged(function(sender, args) {
    var name = args.get_propertyName();
    alert("Property '" + name + "' was changed to '" + sender[name] + "'.");
});

o.setValue("foo", "New string value.");

Also, Client Side templates are ready to use for some interesting scenarios.

A final note, this is fully compatible with jQuery (not problem with $)

Links: Home page, Version I currently use

I was searching for the same thing and hitted your question… none of the answers satisfied my needs so I came up with this solution that I would like to share:

var ObservedObject = function(){
    this.customAttribute = 0
    this.events = {}
    // your code...
}
ObservedObject.prototype.changeAttribute = function(v){
     this.customAttribute = v
     // your code...
     this.dispatchEvent('myEvent')
}
ObservedObject.prototype.addEventListener = function(type, f){
    if(!this.events[type]) this.events[type] = []
    this.events[type].push({
        action: f,
        type: type,
        target: this
    })
}
ObservedObject.prototype.dispatchEvent = function(type){
    for(var e = 0; e < this.events[type].length; ++e){
        this.events[type][e].action(this.events[type][e])
    }
}
ObservedObject.prototype.removeEventListener = function(type, f){
    if(this.events[type]) {
        for(var e = 0; e < this.events[type].length; ++e){
            if(this.events[type][e].action == f)
                this.events[type].splice(e, 1)
        }
    }
}

var myObj = new ObservedObject()

myObj.addEventListener('myEvent', function(e){// your code...})

It’s a simplification of the DOM Events API and works just fine!
Here is a more complete example