在JQuery中包装事件处理程序 [英] Wrap the event handler in JQuery

问题描述

我对OnBlur事件处理程序有一些输入，例如

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;"  />

在准备好JQuery表单后，我想将OnBlur事件处理程序转换为类似的

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);"  />

这意味着我想用一些额外的代码包装当前事件处理程序. 我想在做一些额外的工作后使用setTimeOut()调用旧代码.
是否可以像上述一样在客户端执行操作?
我已经尝试过attr()，但是它不起作用.
内容已更改，但在Blur上没有任何反应.
另外，我认为在这种情况下我不能使用Blur()/Live()/bind()，可以吗?

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?

推荐答案

您所拥有的称为DOM0处理程序.使用任何DOM标准都未定义但所有主要浏览器都支持的机制连接的处理程序.

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.

在您的特定示例中，您可以使用jQuery附加您自己的blur处理程序，该jQuery附加一个现代的或"DOM2"处理程序，不会替换DOM0处理程序，因为您要做的就是添加致电.如果您想做其他事情，则必须做一些更复杂的事情，因为某些浏览器在调用DOM2处理程序之前先调用DOM0处理程序，而其他浏览器在调用DOM0处理程序之前先调用DOM2处理程序.但同样，由于您正在执行的操作是通过异步触发(通过setTimeout)，所以这无关紧要，您不必在意哪个首先被调用，因为超时代码要到以后才会运行.

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:

您可以将DOM0处理程序替换为现代的DOM2处理程序.您只需要从DOM元素上反映的属性中获取DOM0处理程序，而是附加自己的处理程序，然后从处理程序中调用DOM0函数即可.您希望确保在期望的上下文中使用期望的参数调用DOM0处理程序.这样的事情(此示例使用click而不是blur，但在两种情况下都应相同):

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");
  });
}

在线示例

请注意不对称性:我们读取了onclick属性并获得了一个函数，但我们为其分配了一个字符串.将空白字符串分配给onclick是清除处理程序的最广泛兼容的方法(分配null或undefined在某些浏览器中不起作用). (好吧，另一种方法是target[0].onclick = function() { }，但是为什么在不需要时创建函数.)

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.)

更新:

在下面的评论中，您说过要在超时后调用DOM0处理程序.您只需包装代码以在闭包中调用它(并处理this问题)，就可以轻松地做到这一点:

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;
  });
}

并在发生之前取消它:

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

这篇关于在JQuery中包装事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！