Question

I have some inputs with OnBlur event handlers something like

<input name="abc" tabIndex="5" class="datetime" onblur="if (CheckMode(this))__doPostBack('abc',''); else return false;"  />

In JQuery Form ready, I’d like to convert OnBlur event hanlder into something like

 <input name="abc" tabIndex="5" class="datetime" onblur="....; setTimeout(function(){if (CheckMode(this))__doPostBack('abc',''); else return false;},100);"  />

It means I’d like to wrap the current event handlers with some extra codes.
I’d like to call the old code with setTimeOut() after doing some extra work.

If’s possible to do on the client side like the above?
I’ve tried attr() , but it does NOT work.

The contents are changed , but nothing happens onBlur.
Also, I think , I can’t use Blur()/Live()/bind() in this situation, can I?

Answer 1

What you have there is called a DOM0 handler — a handler hooked up using a mechanism that isn’t defined by any DOM standard, but which is supported by all major browsers.

In your particular example, you could just attach your own blur handler using jQuery which attaches a modern or “DOM2” handler, which won’t displace the DOM0 handler, since all you want to do is add a setTimeout call. If you wanted to do anything else, you’d have to do something more complicated, because some browsers call DOM0 handlers before calling DOM2 handlers, and other browsers call DOM2 handlers before calling DOM0 handlers. But again, since what you’re doing is triggering something asynchronous (via setTimeout), that wouldn’t matter, you don’t care which gets called first because your timeout code won’t run until later anyway.

But let’s assume you want to do something more interesting:

You can replace a DOM0 handler with a modern DOM2 one. You just have to grab the DOM0 handler from the reflected property on the DOM element, attach your own handler instead, and then call the DOM0 function from your handler. You want to be sure to call the DOM0 handler in the context it expects, and with the arguments it expects. Something like this (this example uses click rather than blur, but it should work the same in both cases):

var target, dom0handler;

// Use jQuery to find the element
target = $("#target");

// Did we find it?
if (target[0]) {
  // Yes, get the DOM0 handler from the DOM element itself (not the jQuery object)
  dom0handler = target[0].onclick;

  // Get rid of it
  target[0].onclick = "";

  // Hook up our own handler
  target.click(function(event) {
    display("Before calling DOM0 handler");
    if (typeof dom0handler === "function") {
      if (dom0handler.call(this, event) === false) {
        event.preventDefault();
      }
    }
    display("After calling DOM0 handler");
  });
}

Live example

Note the asymmetry: We read the onclick property and get a function, but we assign a string to it. Assigning a blank string to onclick is the most broadly-compatible way of clearing the handler (assigning null or undefined doesn’t work in some browsers). (Well, okay, the other way would be target[0].onclick = function() { }, but why create a function when you don’t need to.)

---

Update:

From your comment below, you’ve said you want to call the DOM0 handler after a timeout. You can do that easily enough just by wrapping the code to call it in a closure (and handling the this issue):

var target,
    dom0handler,
    activeTimeout = 0; // Use 0 for "none" because 0 is not a valid return from `setTimeout`

// Use jQuery to find the element
target = $("#target");

// Did we find it?
if (target[0]) {
  // Yes, get the DOM0 handler from the DOM element itself (not the jQuery object)
  dom0handler = target[0].onclick;

  // Get rid of it
  target[0].onclick = "";

  // Hook up our own handler
  target.click(function(event) {
    var element = this; // Remember the element to a local, because `this` will have a different value inside the function called by `setTimeout`
    // If we have a function to call and we're not busy...
    if (activeTimeout === 0 && typeof dom0handler === "function") {
      // ...call it
      activeTimeout = setTimeout(function() {
          activeTimeout = 0;                // Clear this since the timeout has occurred
          dom0handler.call(element, event); // Call the handler; we no longer care about its return value
      }, 100);
    }
    return false;
  });
}

And to cancel it before it happens:

if (activeTimeout !== 0) {
    clearTimeout(activeTimeout);
    activeTimeout = 0;
}