将事件处理程序包装在JQuery中

问题描述

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

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

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

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

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

解决方法

        您所拥有的称为DOM0处理程序-一种使用任何DOM标准未定义但所有主流浏览器都支持的机制连接的处理程序。 在您的特定示例中，您可以使用jQuery附加自己的

blur

处理程序，该jQuery附加一个现代或“ DOM2 \”处理程序，该处理程序不会替换DOM0处理程序，因为您要做的只是添加一个

setTimeout

调用。如果您想做其他事情，则必须做一些更复杂的事情，因为某些浏览器在调用DOM2处理程序之前先调用DOM0处理程序，而另一些浏览器在调用DOM0处理程序之前先调用DOM2处理程序。但是同样，由于您正在执行的操作是通过异步触发（通过

setTimeout

），所以这无关紧要，您不必在意哪个首先被调用，因为超时代码要到以后才会运行。 但是，假设您想做一些更有趣的事情： 您可以将DOM0处理程序替换为现代的DOM2处理程序。您只需从DOM元素上反映的属性中获取DOM0处理程序，而是附加自己的处理程序，然后从处理程序中调用DOM0函数。您希望确保在期望的上下文中使用期望的参数调用DOM0处理程序。这样的事情（此示例使用

click

而不是

blur

，但在两种情况下均应相同）：

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() { }

，但是为什么在不需要时创建函数。） 更新： 从下面的评论中，您已经说过要在超时后调用DOM0处理程序。您只需将代码包装起来以在闭包中调用它（并处理

this

问题）就可以轻松完成此操作：

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

    ,        您不能使用.blur（）将blur事件绑定到元素吗？ http://api.jquery.com/blur/ 例如。

$(\"#mytextbox\").blur(function() {
alert(\"lost focus\");
});

    ,        供您输入：

<input id=\"abc\" name=\"abc\" type=\"text\" tabIndex=\"5\" class=\"datetime\" onblur=\"if (CheckMode(this))__doPostBack(\'abc\',\'\'); else return false;\" onkeyup=\"yourfunction(this.value);\" autocomplete=\"off\">

您的脚本：

function yourfunction(abc){

    $(\"input\").blur(function(){

        var element =$(this); 
        var I = element.attr(\"value\");

        if (I !== \'abc\'){element.val(\'abc\');}

    });

    if(abc.length==0){

        //if length is null do some stuff...
    }

    //do some more stuff here !!

}

注意：

onkeyup=\"yourfunction(this.value);\"