如何订购jQuery绑定的事件 [英] How to order events bound with jQuery

问题描述

假设我有一个网页应用程序，它有一个可能包含4个脚本块的页面 - 我写的脚本可能在其中一个块中找到，但我不知道哪个是由控制器处理的。

我将一些 onclick 事件绑定到一个按钮，但我发现他们有时会按照我没有的顺序执行期望。

有没有办法确保订单，或您过去如何处理此问题？

解决方案

我一直在尝试年龄来概括这种过程，但在我的例子中，我只关心链中第一个事件监听器的顺序。

如果有任何用处，这里是我的jQuery插件，它绑定了一个事件监听器，在任何其他人之前总是被触发：

** 更新内置的jQuery更改（感谢Toskan） **

  （$）{
 $ .fn.bindFirst = function（/ * String * / eventType，/ * [Object]）* / eventData，/ * Function * / handler）{
 var indexOfDot = eventType。指数（。）; 
 var eventNameSpace = indexOfDot> 0？ eventType.substring（indexOfDot）：; 
 
 eventType = indexOfDot> 0？ eventType.substring（0，indexOfDot）：eventType; 
 handler = handler == undefined？ eventData：handler; 
 eventData = typeof eventData ==function？ {}：eventData; 
 
 return this.each（function（）{
 var $ this = $（this）; 
 var currentAttrListener = this [on+ eventType]; 
 
 if（currentAttrListener）{
 $ this.bind（eventType，function（e）{
 return currentAttrListener（e.originalEvent）; 
}）; 
 
这个[on+ eventType] = null; 
} 
 
 $ this.bind（eventType + eventNameSpace，eventData，handler）; 
 
 var allEvents = $ this.data（events）|| $ ._ data（$ this [0]，events）; 
 var typeEvents = allEvents [eventType]; 
 var newEvent = typeEvents.pop ）; 
 typeEvents.unshift（newEvent）; 
}）; 
}; 
}）（jQuery）; 
  

注意事项：

• 这还没有完全测试。


• 它依赖于jQuery框架的内部结构，而不是改变（仅用1.5.2测试） 。


• 在事件侦听器之前，不必以源元素的属性或者使用jQuery bind（）和其他关联函数的方式绑定的触发器。 >
  

Lets say I have a web app which has a page that may contain 4 script blocks - the script I write may be found in one of those blocks, but I do not know which one, that is handled by the controller.

I bind some onclick events to a button, but I find that they sometimes execute in an order I did not expect.

Is there a way to ensure order, or how have you handled this problem in the past?

解决方案

I had been trying for ages to generalize this kind of process, but in my case I was only concerned with the order of first event listener in the chain.

If it's of any use, here is my jQuery plugin that binds an event listener that is always triggered before any others:

** UPDATED inline with jQuery changes (thanks Toskan) **

(function($) {
    $.fn.bindFirst = function(/*String*/ eventType, /*[Object])*/ eventData, /*Function*/ handler) {
        var indexOfDot = eventType.indexOf(".");
        var eventNameSpace = indexOfDot > 0 ? eventType.substring(indexOfDot) : "";

        eventType = indexOfDot > 0 ? eventType.substring(0, indexOfDot) : eventType;
        handler = handler == undefined ? eventData : handler;
        eventData = typeof eventData == "function" ? {} : eventData;

        return this.each(function() {
            var $this = $(this);
            var currentAttrListener = this["on" + eventType];

            if (currentAttrListener) {
                $this.bind(eventType, function(e) {
                    return currentAttrListener(e.originalEvent); 
                });

                this["on" + eventType] = null;
            }

            $this.bind(eventType + eventNameSpace, eventData, handler);

            var allEvents = $this.data("events") || $._data($this[0], "events");
            var typeEvents = allEvents[eventType];
            var newEvent = typeEvents.pop();
            typeEvents.unshift(newEvent);
        });
    };
})(jQuery);

Things to note:

• This hasn't been fully tested.
• It relies on the internals of the jQuery framework not changing (only tested with 1.5.2).
• It will not necessarily get triggered before event listeners that are bound in any way other than as an attribute of the source element or using jQuery bind() and other associated functions.

这篇关于如何订购jQuery绑定的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！