jQuery JavaScript覆盖/扩展事件

Question

I have an element with event set, e.g.

<input type="text" id="txt" onkeyup="javascript: alert('keyup');" />

现在，我想拦截这个事件并运行一些其他的脚本，除了默认的脚本之外。 我编写了以下代码：

jQuery(document).ready(function(){

var old = $("#txt").keyup;

$("#txt") 
     .unbind('keyup')
     .attr('onkeyup', '')
     .each(function() { this.onkeyup = null; });

$("#txt").keyup(function(event){

    alert("before old call");
    //old.call($(this));
    alert("after old call");
});

});

但它并没有按照我预期的那样工作。有人知道如何使其正常工作吗？

示例链接：http://jsfiddle.net/p5JeA/

如果输入框的keyup事件不是内联设置，而是使用jQuery绑定设置呢？ 我想要覆盖/扩展默认行为，而不想改变基本代码。

- Peter

---

这对我来说很好用，你忘记在jsFiddle中包含jQuery了。http://jsfiddle.net/RikudoSennin/p5JeA/1/ - Madara's Ghost

Answer 1

这是一个可运行的fiddle： http://jsfiddle.net/mrchief/p5JeA/2/

var old = $("#txt")[0].onkeyup;

$("#txt")[0].onkeyup = null; // or function () {};
// or $("#txt").removeAttr('onkeyup');

资源中没有包含jQuery。另外，我注释掉了一些部分，因为你不需要它们。

- Mrchief

---

那会调用 removeEventListener 吗？ - Mrchief

非常感谢！@CodeReaper下面的回答也很有帮助。看起来我往往会忘记jQuery返回匹配元素的集合。 - Peter

为什么你要查询 DOM 两次？你并没有使用 old。 - gdoron

@gdoron：old 保留了旧的处理程序，以防您稍后想要恢复它。当然，您不需要两次查询 DOM。这只是一个快速示例，不是生产就绪的代码。 - Mrchief

Answer 2

我已经将你的fiddle fork到这里：http://jsfiddle.net/xdaTH/

我已经启用了jQuery而不是MooTools，但同时使用.get(0)来获取实际的dom元素，该元素定义了onkeyup函数。

脚本：

jQuery(document).ready(function() {
  var old = $("#txt").get(0).onkeyup;

  $("#txt").unbind('keyup').attr('onkeyup', '').each(function() {
      this.onkeyup = null;
  });

  $("#txt").keyup(function(event) {
    alert("before old call");
    old.call(this);
    alert("after old call");
  });

});

- CodeReaper

Answer 3

创建自己的自定义事件，然后触发它：

$('#txt').bind('custom', function(event) {
   alert("before old call");
    //old.call($(this));
    alert("after old call");
});

$('#txt').trigger('custom', ['Custom', 'Event']);

你可以在这里找到相关信息：jQuery触发器

- DanyZift