Javascript detachEvent, which was attached with a $.proxy function

Question

I'm trying to make a Django forms in a formset, where when the last form gets some input it will automatically add a new form to the end of it. I'm using the input detection in this js: http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript

What I have here works just fine in Firefox and I assume any other browser that supports addEventListener and removeEventListener. I don't understand how to correctly set up detachEvent as an IE fallback though? I'm not really that knowledgeable on javascript, just trying to cobble things together.

jQuery.fn.cloneOnInput = function(prefix){
    return this.each(function() {
        var trElement = this
        var inputElements = $(this).find('input')
        var cloneForm = function() {
            cloneMore(trElement, prefix);
            inputElements.each(function(index) {
                if ("onpropertychange" in this) {
                    // What here?
                    }
                else {
                    this.removeEventListener("input", cloneForm);
                    }
                });
            };
        inputElements.each(function(index) {
            // Do I have to change the way it attaches?
            if ("onpropertychange" in this) { 
                this.attachEvent($.proxy(function () {
                if (event.propertyName == "value")
                    cloneForm();
                }, this));}
            else {
                this.addEventListener("input", cloneForm, false);
              }
        });

    });
};

Answer 1

You have to keep track of the proxied handler in order to remove it later. Since the handlers are associated with DOM elements, you can use data() to achieve this:

jQuery.fn.cloneOnInput = function(prefix) {
    return this.each(function() {
        var trElement = this;
        var inputElements = $(this).find("input");
        var cloneForm = function() {
            cloneMore(trElement, prefix);
            inputElements.each(function() {
                if ("onpropertychange" in this) {
                    this.detachEvent("onpropertychange",
                        $(this).data("proxiedHandler"));
                    $(this).removeData("proxiedHandler");
                } else {
                    this.removeEventListener("input", cloneForm);
                }
            });
        };
        inputElements.each(function(index) {
            // Do I have to change the way it attaches?
            if ("onpropertychange" in this) {
                var proxiedHandler = $.proxy(function() {
                    if (event.propertyName == "value") {
                        cloneForm();
                    }
                }, this);
                $(this).data("proxiedHandler", proxiedHandler);
                this.attachEvent("onpropertychange", proxiedHandler);
            } else {
                this.addEventListener("input", cloneForm, false);
            }
        });
    });
};