jQuery 中的事件处理程序序列答案

【问题标题】：Event handler sequence in jQueryjQuery 中的事件处理程序序列
【发布时间】：2012-11-22 01:00:31
【问题描述】：

我正在将事件动态绑定到文本元素。这是我的代码：

<input type="text" id="myTxt" />

<script type="text/javascript">
    function attachEvent1(element){
        element.keyup(function(){
            console.log("Event:"+event.keyCode);
        });
    }
    function attachEvent2(element){
        element.keyup(function(){
            console.log("Value:"+this.value);
        });
    }   
    attachEvent1($('#myTxt'));
    attachEvent2($('#myTxt'));      
</script>

我需要它，我希望首先调用第二个事件处理程序（由 attachEvent2 附加），即使它是在 attachEvent1 之后绑定的。 jQuery可以吗？

【问题讨论】：

不是开箱即用的，没有。您需要深入了解 jQuery._data 对象 expandos，其中存储了事件处理程序并重新排序函数。
在您想首先执行的处理程序结束时，您可以触发一个事件并将第二个处理程序绑定到该事件。
jQuery 故意保证事件处理程序将按照它们绑定的顺序被调用。您可以绑定一个代理函数，该函数知道调用其他函数的顺序。
我不久前回答了这个问题。您可以通过使用内部 API 来解决问题。但不幸的是，它们自 1.8+ 版本以来发生了变化，所以我更新了我的答案。这也是为什么您应该在 jQuery 之上创建自己的 API 层来控制顺序的原因，而不是使用 jQuery API。 stackoverflow.com/questions/2360655/…
@Anurag。谢谢。您能否将您的评论移至答案，以便我可以接受作为答案。

标签： javascript jquery html events

【解决方案1】：

这样的事情怎么样：

function handler1()
{
  console.log("Event:"+event.keyCode);
}

function handler2()
{
  console.log("Value:"+this.value);
}

function attachEvent1(element)
{
  element.keyup(handler1);
}

function attachEvent2(element)
{
  element.unbind('keyup', handler1);
  element.keyup(handler2);
  element.bind('keyup', handler1);
}   

attachEvent1($('#myTxt'));
attachEvent2($('#myTxt'));

如果您想要更高级的东西，您可以保留处理程序列表，并在循环中进行重新绑定等，但是重新绑定事件的基本思想具有预期的效果。

【讨论】：