【问题标题】:Wrap the event handler in JQuery在 JQuery 中包装事件处理程序
【发布时间】:2011-09-13 07:52:30
【问题描述】:

我有一些关于 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() ,但它不起作用。
内容已更改,但在 Blur 上没有任何反应。
另外,我想,在这种情况下我不能使用 Blur()/Live()/bind(),可以吗?

【问题讨论】:

  • 你能解释一下情况吗?如果您可以控制代码,那么从一开始就将延迟构建到事件处理程序中比在客户端包装它要简单得多。
  • 如果你使用 jQuery,你不应该在你的 HTML 中使用onblur。这超出了不好的做法。
  • @gnarf:我敢打赌这是他无法控制的生成代码。 (如果他这样做了,想必他只是添加他想添加的代码。)
  • 是的。 T.J.Crowder 所说的完全正确。它们是从服务器端渲染的,我无法控制。所以我没有其他选择,只能尝试更改 javascript。

标签: javascript jquery


【解决方案1】:

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

在您的特定示例中,您可以使用 jQuery 附加您自己的 blur 处理程序,该处理程序附加一个现代或“DOM2”处理程序,它不会取代 DOM0 处理程序,因为您要做的就是添加一个 @987654324 @ 称呼。如果你想做其他任何事情,你必须做一些更复杂的事情,因为一些浏览器在调用 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");
  });
}

Live example

注意不对称性:我们读取onclick 属性并获得一个函数,但我们为它分配了一个字符串。将空白字符串分配给onclick 是最广泛兼容的清除处理程序的方法(分配nullundefined 在某些浏览器中不起作用)。 (嗯,好吧,另一种方式是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;
}

【讨论】:

  • @Kai:你想完全延迟回发?
  • @Kai:你可以使用一个闭包来保存每一个(more),或者有一个handlers作为对象的变量(var handlers = {};),然后记住每个处理程序作为一个属性该对象,可能使用字段的名称。因此,如果您有一个循环,将字段名称放入名为name 的变量中,您会通过执行handlers[name] = target[0] 记住处理程序,然后使用handlers[name] 而不是dom0handler
  • @Kai:哈哈,不用担心,很高兴有帮助。
【解决方案2】:

你不能使用 .blur() 将模糊事件绑定到元素上吗?

http://api.jquery.com/blur/

例如

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

【讨论】:

    【解决方案3】:

    供您参考:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-09-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-10
      • 1970-01-01
      • 2012-03-02
      相关资源
      最近更新 更多