Guest User

jQuery 1.7.2 Live Event Ordering by priority usage

a guest
Apr 4th, 2012
1,212
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  5.     <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
  6.     <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
  7. <script>
  8. (function (window, $j, undefined) {
  9.    
  10.     var statics = {
  11.         eventNamespace: 'priorityHandler',
  12.         priorityData: 'POI.priority',
  13.         handlerNS: 'handlerQueue',
  14.         capturedEventNames: {},
  15.         originalDispatchMethod: undefined,
  16.         max_priority: 10,
  17.         min_priority: -10,
  18.         peek: 'justPeeking'
  19.     };
  20.    
  21.     $j.widget("POI.onPriority", {
  22.         // These options will be used as defaults
  23.         options: {
  24.             events: undefined,
  25.             selector: undefined,
  26.             data: undefined,
  27.             fn: undefined,
  28.             priority: 0,
  29.             max_priority: statics.max_priority,
  30.             min_priority: statics.min_priority
  31.         },
  32.        
  33.         //runs only once/DOM element
  34.         _create: function() {
  35.             //capture for other events which don't need ordering
  36.             if (!statics.originalDispatchMethod) {
  37.                 statics.originalDispatchMethod = $j.event.dispatch;
  38.                 this._replaceDispatchMethod();
  39.             }
  40.         },
  41.        
  42.         //runs each time the plugin is called which might be mutliple times/DOM element
  43.         //Event-map isn't supported yet
  44.         _init: function () {
  45.             var options = this.options,
  46.                 eventNames, i;
  47.            
  48.             eventNames = this._parseEventNames(options.events, options.selector);
  49.             for(i = 0; i<eventNames.length;i++){
  50.                 var name = eventNames[i];
  51.                
  52.                 //only bind if not already bound to make sure the event bubbles all the way
  53.                 if (!statics.capturedEventNames[name]) {
  54.                     statics.capturedEventNames[name] = {};
  55.                     $j(window).on(name + "." + statics.eventNamespace, function(){
  56.                         //no action necessary, only to ensure that event bubbling is over
  57.                     });
  58.                 }
  59.             };
  60.            
  61.             if(options.priority > statics.max_priority || options.priority < statics.min_priority)
  62.             {
  63.                 throw "The priority can only be set between "+statics.max_priority+" and "+statics.min_priority+".";
  64.             }
  65.             options.data = (options.data || {});
  66.             options.data[statics.priorityData] = options.priority;
  67.                        
  68.             this.element.on(options.events, options.selector, options.data, options.fn);
  69.         },
  70.        
  71.         /*********************************************************************************
  72.          *
  73.          *                          jQuery private methods
  74.          *
  75.          *********************************************************************************/
  76.         _hoverHack: function( events ) {
  77.             var rhoverHack = /(?:^|\s)hover(\.\S+)?\b/;
  78.             return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" );
  79.         },
  80.        
  81.         /*********************************************************************************
  82.          *
  83.          *                          jQuery private methods
  84.          *
  85.          *********************************************************************************/
  86.  
  87.         //partially taken from jQuery
  88.         _parseEventNames: function(types, selector){
  89.             var rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/,
  90.                 t, tns, type, result = []; 
  91.            
  92.             // Handle multiple events separated by a space
  93.             // jQuery(...).bind("mouseover mouseout", fn);
  94.             types = jQuery.trim(this._hoverHack(types)).split(" ");
  95.             for (t = 0; t < types.length; t++) {
  96.                 tns = rtypenamespace.exec(types[t]) || [];
  97.                 type = tns[1];
  98.                 // If event changes its type, use the special event handlers for the changed type
  99.                 special = jQuery.event.special[type] || {};
  100.                 // If selector defined, determine special event api type, otherwise given type
  101.                 type = (selector ? special.delegateType : special.bindType) || type;
  102.                 result[t] = type;
  103.             }
  104.             return result;
  105.         },
  106.  
  107.         /**
  108.          * Method has to be overwritten as we want to encapsulate the event
  109.          * handling chain, first the priority of events is taken into account,
  110.          * secondly the regular bubbling hierarchy is used. Most of the code is
  111.          * copied directly from jQuery, the only adaptions are regarding resorting
  112.          * the handler's based on a priority and the wrapping of the event bubbling
  113.          * to ensure all handler's are included.
  114.          **/
  115.         _replaceDispatchMethod: function() {
  116.             var _quickIs = function( elem, m ) {
  117.                 var attrs = elem.attributes || {};
  118.                 return ((!m[1] || elem.nodeName.toLowerCase() === m[1]) &&
  119.                         (!m[2] || (attrs.id || {}).value === m[2]) &&
  120.                         (!m[3] || m[3].test( (attrs[ "class" ] || {}).value ))
  121.                 );
  122.             };
  123.            
  124.             //CAREFUL: this isn't ourself here, rather it's the element
  125.             $j.event.dispatch = function(event){
  126.                
  127.                 //event isn't interested in ordering by priority
  128.                 if (statics.capturedEventNames[event.type] === undefined) {
  129.                     return statics.originalDispatchMethod ? statics.originalDispatchMethod.apply(this, arguments) : null;
  130.                 }
  131.                
  132.                 // Make a writable $j.Event from the native event object
  133.                 event = $j.event.fix(event || window.event);
  134.                 var handlers = (($j._data(this, "events") || {})[event.type] || []),
  135.                     delegateCount = handlers.delegateCount,
  136.                     args = [].slice.call(arguments, 0),
  137.                     run_all = !event.exclusive && !event.namespace,
  138.                     special = $j.event.special[event.type] || {},
  139.                     handlerQueue = [], i, j, cur, jqcur, ret, selMatch, matched, matches, handleObj, sel, related;
  140.                    
  141.                 // Use the fix-ed $j.Event rather than the (read-only) native event
  142.                 args[0] = event;
  143.                 event.delegateTarget = this;
  144.                 // Call the preDispatch hook for the mapped type, and let it bail if desired
  145.                 if (special.preDispatch && special.preDispatch.call(this, event) === false) {
  146.                     return;
  147.                 }
  148.                 // Determine handlers that should run if there are delegated events
  149.                 // Avoid non-left-click bubbling in Firefox (#3861)
  150.                 if (delegateCount && !(event.button && event.type === "click")) {
  151.                     // Pregenerate a single $j object for reuse with .is()
  152.                     jqcur = $j(this);
  153.                     jqcur.context = this.ownerDocument || this;
  154.                     for (cur = event.target; cur != this; cur = cur.parentNode || this) {
  155.                         // Don't process events on disabled elements (#6911, #8165)
  156.                         if (cur.disabled !== true) {
  157.                             selMatch = {};
  158.                             matches = [];
  159.                             jqcur[0] = cur;
  160.                             for (i = 0; i < delegateCount; i++) {
  161.                                 handleObj = handlers[i];
  162.                                 sel = handleObj.selector;
  163.                                 if (selMatch[sel] === undefined) {
  164.                                     selMatch[sel] = (handleObj.quick ? _quickIs(cur, handleObj.quick) : jqcur.is(sel));
  165.                                 }
  166.                                 if (selMatch[sel]) {
  167.                                     matches.push(handleObj);
  168.                                 }
  169.                             }
  170.                             if (matches.length) {
  171.                                 handlerQueue.push({
  172.                                     elem: cur,
  173.                                     matches: matches
  174.                                 });
  175.                             }
  176.                         }
  177.                     }
  178.                 }
  179.                 // Add the remaining (directly-bound) handlers
  180.                 if (handlers.length > delegateCount) {
  181.                     handlerQueue.push({
  182.                         elem: this,
  183.                         matches: handlers.slice(delegateCount)
  184.                     });
  185.                 }
  186.                                
  187.                 //has to exist as we have an exit clause on top of the function
  188.                 statics.capturedEventNames[event.type][statics.handlerNS] = statics.capturedEventNames[event.type][statics.handlerNS] || [];
  189.                
  190.                 if(!!handlerQueue.length) {
  191.                     statics.capturedEventNames[event.type][statics.handlerNS].push(handlerQueue);
  192.                 }
  193.                                
  194.                 if(this === window)
  195.                 {
  196.                     var accumulatedHandlers = _.flatten(statics.capturedEventNames[event.type][statics.handlerNS]),
  197.                         sortedHandlers = [], sortedElement, sortedMatch, sortedMatches, requireResort = false;
  198.                    
  199.                     //from now on we work with the sorted copy or if it wasn't necessary just with a local copy
  200.                     delete statics.capturedEventNames[event.type][statics.handlerNS];                    
  201.                    
  202.                     //check if our handler is the only one registered, if so, ignore
  203.                     if (accumulatedHandlers.length === 1                        //only one level is interested in the event
  204.                         && accumulatedHandlers[0].matches.length === 1          //only one handler (that's us)
  205.                         && accumulatedHandlers[0].matches[0].namespace === statics.eventNamespace)  //make sure it's our handler
  206.                     {
  207.                         //no sorting or handling necessary
  208.                         return;
  209.                     }
  210.                    
  211.                     //iterate over all levels
  212.                     for (i = 0; i < accumulatedHandlers.length; i++) {
  213.                         sortedElement = accumulatedHandlers[i].elem;
  214.                         sortedMatches = accumulatedHandlers[i].matches;
  215.                         for (j = 0; j < sortedMatches.length; j++) {
  216.                             sortedMatch = sortedMatches[j];
  217.                             if(sortedMatch.data && sortedMatch.data[statics.priorityData]){
  218.                                 requireResort = true;
  219.                             }
  220.                             sortedHandlers.push({
  221.                                 elem: sortedElement,
  222.                                 matches: sortedMatch
  223.                             });
  224.                         }
  225.                     }
  226.                    
  227.                     if(!!sortedHandlers.length && requireResort){
  228.                         function sortByPriority(a,b){  
  229.                             var aPrio = (a.matches.data || {})[statics.priorityData] || 0,
  230.                                 bPrio = (b.matches.data || {})[statics.priorityData] || 0;
  231.                             //revert order if prio is not 0, keep prio for 0
  232.                             if (aPrio || bPrio) {
  233.                                 return aPrio > bPrio ? -1 : 1;
  234.                             }
  235.                             return aPrio >= bPrio ? -1 : 1;
  236.                         };
  237.                         sortedHandlers.sort(sortByPriority);
  238.                     }
  239.                    
  240.                     //used when peeking to get the highest priority
  241.                     if(sortedHandlers[0].matches.namespace.indexOf(statics.peek)!==-1)
  242.                     {
  243.                         var matched = sortedHandlers[0];
  244.                         args.push(sortedHandlers.slice(1));
  245.                         return matched.matches.handler.apply(matched.elem, args);
  246.                     }
  247.                    
  248.                     // Run delegates first; they may want to stop propagation beneath us
  249.                     for (i = 0; i < sortedHandlers.length; i++) {
  250.                         matched = sortedHandlers[i];
  251.                         //uncommented as bubbling doesn't really match our concept of priorities
  252.                         //stop bubbling only if the context switches
  253. //                      if(event.isPropagationStopped() && lastContext && lastContext != matched.elem){
  254. //                          //we don't allow preventing bubbling when specifying a priority
  255. //                          currentPriority = (event.data || {})[statics.priorityData]||0;
  256. //                         
  257. //                          if (!currentPriority) {
  258. //                              return;
  259. //                          }
  260. //                      }
  261. //                      lastContext = matched.elem;
  262.                         event.currentTarget = matched.elem;
  263.                         if(matched.matches){
  264.                             if (event.isImmediatePropagationStopped()) {
  265.                                 return;
  266.                             }
  267.                             handleObj = matched.matches;
  268.                             // Triggered event must either 1) be non-exclusive and have no namespace, or
  269.                             // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
  270.                             if (run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test(handleObj.namespace)) {
  271.                                 event.data = handleObj.data;
  272.                                 event.handleObj = handleObj;
  273.                                 ret = (($j.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply(matched.elem, args);
  274.                                 if (ret !== undefined) {
  275.                                     event.result = ret;
  276.                                     if (ret === false) {
  277.                                         event.preventDefault();
  278.                                         event.stopPropagation();
  279.                                     }
  280.                                 }
  281.                             }
  282.                         }
  283.                     }
  284.                     // Call the postDispatch hook for the mapped type
  285.                     if (special.postDispatch) {
  286.                         special.postDispatch.call(this, event);
  287.                     }
  288.                     return event.result;
  289.                 }
  290.                 // Call the postDispatch hook for the mapped type
  291.                 if (special.postDispatch) {
  292.                     special.postDispatch.call(this, event);
  293.                 }
  294.             }          
  295.         },
  296.        
  297.         _setOption: function (key, value) {
  298.             switch (key) {
  299.                 case "max_priority":
  300.                     if(value<this.options.min_priority){
  301.                         throw "The max. priority can't be lower than the min. priority";
  302.                     }
  303.                     statics.max_priority = value;
  304.                     break;
  305.                 case "min_priority":
  306.                     if(value>this.options.max_priority){
  307.                         throw "The min. priority can't be higher than the max. priority";
  308.                     }
  309.                     statics.min_priority = value;
  310.                     break;
  311.             }
  312.             // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
  313.             $j.Widget.prototype._setOption.apply(this, arguments);
  314.             // In jQuery UI 1.9 and above, you use the _super method instead
  315.             // this._super("_setOption", key, value);
  316.         },
  317.  
  318.         // Use the destroy method to clean up any modifications your widget has made to the DOM
  319.         destroy: function () {
  320.             // In jQuery UI 1.8, you must invoke the destroy method from the base widget
  321.             $.Widget.prototype.destroy.call(this);
  322.             // In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method
  323.         }
  324.     });
  325.    
  326.     $j.POI = $j.POI || {};
  327.    
  328.     $j.extend($j.POI, {
  329.         peek: function(eventName, selector, lowest){
  330.             if (typeof eventName !== 'string') {
  331.                 return;
  332.             }
  333.             var element, returnQueue = [];
  334.             if (typeof selector === 'string' || !(selector instanceof $j)) {
  335.                 element = $j(selector);
  336.             }
  337.             element = element || selector;
  338.             if (!element || (element && element.length === 0)) {
  339.                 throw "No elements were found with the provided selector";
  340.             }
  341.             $j(window).onPrio(eventName + "." + statics.peek, function(event, data){
  342.                 $j(window).off("." + statics.peek);
  343.                 returnQueue = data || returnQueue;
  344.             }, statics.max_priority);
  345.             element.trigger(eventName + "." + statics.peek);
  346.             if (lowest) {
  347.                 return ((((returnQueue || [])[returnQueue.length - 1] || {}).matches || {}).data || {})['POI.priority'] || 0;
  348.             }
  349.             return ((((returnQueue || [])[0] || {}).matches || {}).data || {})['POI.priority'] || 0;
  350.         }
  351.     });
  352.  
  353.     function registerHandler(types, selector, data, fn, firstOrLast){
  354.         //taken from jQuery.fn.on
  355.         var origFn, type;
  356.         // Types can be a map of types/handlers
  357.         if (typeof types === "object") {
  358.             // ( types-Object, selector, data )
  359.             if (typeof selector !== "string") { // && selector != null
  360.                 // ( types-Object, data )
  361.                 data = data || selector;
  362.                 selector = undefined;
  363.             }
  364.             for (type in types) {
  365.                 registerHandler.call(this, type, selector, data, types[type], firstOrLast);
  366.             }
  367.             return this;
  368.         }
  369.         if (data == null && fn == null) {
  370.             // ( types, fn )
  371.             fn = selector;
  372.             data = selector = undefined;
  373.         } else if (fn == null) {
  374.             if (typeof selector === "string") {
  375.                 // ( types, selector, fn )
  376.                 fn = data;
  377.                 data = undefined;
  378.             } else {
  379.                 // ( types, data, fn )
  380.                 fn = data;
  381.                 data = selector;
  382.                 selector = undefined;
  383.             }
  384.         }
  385.         if (fn === false) {
  386.             fn = returnFalse;
  387.         } else if (!fn) {
  388.             return this;
  389.         }
  390.         return this.each(function(){
  391.             if(typeof firstOrLast === 'boolean'){
  392.                 var sel = selector || this;
  393.                 priority = firstOrLast ? $j.POI.peek(types, sel, firstOrLast)-1 : $j.POI.peek(types, sel, firstOrLast)+1;
  394.                 if (priority > statics.max_priority) {
  395.                     statics.max_priority = priority+5;
  396.                 }
  397.                 else if (priority < statics.min_priority) {
  398.                     statics.min_priority = priority-5;
  399.                 }
  400.             }
  401.             $j(this).onPriority({'events':types, 'selector':selector, 'data':data, 'fn':fn, 'priority':priority});
  402.         });
  403.     }
  404.  
  405.     $j.fn.addFirst = function(types, selector, data, fn){
  406.         return registerHandler.call(this, types, selector, data, fn, false);
  407.     }
  408.    
  409.     $j.fn.addLast = function(types, selector, data, fn){
  410.         return registerHandler.call(this, types, selector, data, fn, true);
  411.     }
  412.    
  413.     /**
  414.      * Just for convenience to allow calling in natural fashion instead of object literal
  415.      * @param {Object} event see jQuery on method
  416.      * @param {Object} selector see jQuery on method
  417.      * @param {Object} data see jQuery on method
  418.      * @param {Object} handler see jQuery on method
  419.      * @param {Object} priority a priority between 10 and -10
  420.      */
  421.     $j.fn.onPrio = function(types, selector, data, fn, priority){
  422.         /**
  423.          * influenced by jQuery.on
  424.          */
  425.         var type;
  426.         // Types can be a map of types/handlers
  427.         if (typeof types === "object") {
  428.             // (types-Object, priority)
  429.             if(typeof selector === "number"){
  430.                 priority = selector;
  431.                 selector = data = undefined;
  432.             }
  433.             // ( types-Object, selector, priority )
  434.             else if (typeof selector === "string" && typeof data === "number") {
  435.                 priority = data;
  436.                 data = undefined;
  437.             }
  438.             // ( types-Object, data, priority )
  439.             else if (typeof selector !== "string" && typeof data === "number") {
  440.                 priority = data;
  441.                 data = selector;
  442.                 selector = undefined;
  443.             }
  444.             // ( types-Object, selector, data, priority )
  445.             else if (typeof fn === "number") {
  446.                 priority = fn;
  447.             }
  448.             for (type in types) {
  449.                 this.onPrio(type, selector, data, types[type], priority);
  450.             }
  451.             return this;
  452.         }
  453.         //function(types, selector, data, fn, priority)
  454.         if (!fn && fn != 0 && !priority) {
  455.             // (types, fn, priority)
  456.             fn = selector;
  457.             priority = data;
  458.             data = selector = undefined;
  459.         }
  460.         else if (!priority) {
  461.             if (typeof selector === "string") {
  462.                 // ( types, selector, fn )
  463.                 priority = fn;
  464.                 fn = data;
  465.                 data = undefined;
  466.             } else {
  467.                 // ( types, data, fn )
  468.                 priority = fn;
  469.                 fn = data;
  470.                 data = selector;
  471.                 selector = undefined;
  472.             }
  473.         }
  474.         if (fn === false) {
  475.             fn = returnFalse;
  476.         } else if (!fn) {
  477.             return this;
  478.         }
  479.         return this.each(function(){
  480.             $j(this).onPriority({'events':types, 'selector':selector, 'data':data, 'fn':fn, 'priority':priority});
  481.         });
  482.     };
  483.    
  484.     $j(document).ready(function(){
  485.         $j(document).on('click.poi','p', function(){console.log('9 Default jQuery still works as expected, registered very first on document with selector to p');});
  486.         $j(document).onPrio('click.poi', 'p', {someData: 'data'}, function(){console.log('13 Using a selector and data as args');}, -4);
  487.         $j(document).onPrio('click.poi', 'p', function(){console.log('5 Using only a selector and prio 2');}, 2);
  488.         $j(document).onPrio('click.poi','p', function(){console.log('10 Registered with 0 as prio on document with selector p');}, 0);
  489.         $j(document).onPrio('click.poi','p', {'someData':'something'}, function(){console.log('2 Registered before 10 with prio 8');},8);
  490.         $j(document).onPrio('click.poi','p', function(){console.log('1 Registered after others with prio 10');},10);
  491.  
  492.         $j(document).on('click.poi', function(){console.log('11 Registered with on on document');});
  493.         $j(document).onPrio('click.poi', function(){console.log('12 Registered with -3 as prio on document');}, -3);
  494.  
  495.         $j('p').on('click.poi', function(){console.log('8 Registered with on on p');});
  496.         $j('p').onPrio('click.poi', function(){console.log('7 No selector or data, prio 1');}, 1);
  497.         $j('p').onPrio('click.poi', {someData:'data'}, function(){console.log('4 No selector but data, prio 3');}, 3);
  498.         //covering all possibilities using a map
  499.         $j('p').onPrio({'click.poi':function(){console.log('6 Registered using a map, prio 1 after other prio 1 gets resorted');},
  500.                         'dblclick.poi':function(){console.log('1 Registered double click with prio 1');}}, 1);
  501.         $j(document).onPrio({'click.poi':function(){console.log('Registered using a map, prio -5');},
  502.                             'dblclick.poi':function(){console.log('Registered double click with prio -5');}}, 'p', -5);
  503.         $j(document).onPrio(
  504.         {'click.poi':function(event){
  505.             console.log('Registered using a map, prio 1 after other prio 1 gets resorted');
  506.             console.log("   Show data from event.data:");
  507.             for (var x in event.data) {
  508.                 console.log("      "+x+" hat den Wert "+event.data[x]);
  509.             }
  510.         },
  511.         'dblclick.poi':function(event){
  512.             console.log('Registered double click with prio 1');
  513.             console.log("   Show data from event.data:");
  514.             for (var x in event.data) {
  515.                 console.log("      "+x+" hat den Wert "+event.data[x]);
  516.             }
  517.         }}, 'p', {someData:'data'}, 1);
  518.         $j(document).onPrio(
  519.         {'click.poi':function(event){
  520.             console.log('Registered using a map, prio 7');
  521.             console.log("   Show data from event.data:");
  522.             for (var x in event.data) {
  523.                 console.log("      "+x+" hat den Wert "+event.data[x]);
  524.             }
  525.         },
  526.         'dblclick.poi':function(event){
  527.             console.log('Registered double click with prio 7');
  528.             console.log("   Show data from event.data:");
  529.             for (var x in event.data) {
  530.                 console.log("      "+x+" hat den Wert "+event.data[x]);
  531.             }
  532.         }}
  533.         , {someData:'data'}, 7);
  534.         $j('p').onPrio('click.poi', {some:'data'}, function(event){
  535.             console.log('3 Registered with data and 6 as prio');
  536.             console.log("   Show data from event.data:");
  537.             for (var x in event.data) {
  538.                 console.log("      "+x+" hat den Wert "+event.data[x]);
  539.             }
  540.         }, 6);
  541.        
  542.         $j(document).onPriority('option', 'max_priority', 100);
  543.         $j(document).onPrio('click.poi', function(){console.log("I'm the first even when registered last. Prio is 100");}, 100);
  544.        
  545.         $j(document).addLast('click.poi', 'p', function(){console.log("I don't know my priority but i'm running last");});
  546.         $j(document).addFirst('click.poi', 'p', function(){console.log("I don't know my priority but i'm the first one running");});
  547.     });
  548. })(window, jQuery);
  549. </script>
  550. </head>
  551. <body>
  552.     <div>
  553.         <h3>
  554.             This page shows how the events can be bound with JS and how the priority influences the order of execution.
  555.             All events are bound using a namespace which is the intended way of using events.
  556.         </h3>
  557.     </div>
  558.     <br/>
  559.     <p>
  560.         $j(document).on('click.poi','p', function(){console.log('9 Default jQuery still works as expected, registered very first on document with selector to p');});
  561.     </p>
  562.     <p>
  563.         $j(document).onPrio('click.poi', 'p', {someData: 'data'}, function(){console.log('13 Using a selector and data as args');}, -4);
  564.     </p>
  565.     <p>
  566.         $j(document).onPrio('click.poi', 'p', function(){console.log('5 Using only a selector and prio 2');}, 2);
  567.     </p>
  568.     <p>
  569.         $j(document).onPrio('click.poi','p', function(){console.log('10 Registered with 0 as prio on document with selector p');}, 0);
  570.     </p>
  571.     <p>
  572.         $j(document).onPrio('click.poi','p', {'someData':'something'}, function(){console.log('2 Registered before 10 with prio 8');},8);
  573.     </p>
  574.     <p>
  575.         $j(document).onPrio('click.poi','p', function(){console.log('1 Registered after others with prio 10');},10);
  576.     </p>
  577.     <br/>
  578.     <p>
  579.         $j(document).on('click.poi', function(){console.log('11 Registered with on on document');});
  580.     </p>
  581.     <p>
  582.         $j(document).onPrio('click.poi', function(){console.log('12 Registered with -3 as prio on document');}, -3);
  583.     </p>
  584.     <br/>
  585.     <p>
  586.         $j('p').on('click.poi', function(){console.log('8 Registered with on on p');});
  587.     </p>
  588.     <p>
  589.         $j('p').onPrio('click.poi', function(){console.log('7 No selector or data, prio 1');}, 1);
  590.     </p>
  591.     <p>
  592.         $j('p').onPrio('click.poi', {someData:'data'}, function(){console.log('4 No selector but data, prio 3');}, 3);
  593.     </p>
  594.     <p>
  595.         $j('p').onPrio({'click.poi':function(){console.log('6 Registered using a map, prio 1 after other prio 1 gets resorted');},
  596.                         'dblclick.poi':function(){console.log('1 Registered double click with prio 1');}}, 1);
  597.     </p>
  598.     <p>
  599.         $j(document).onPrio({'click.poi':function(){console.log('Registered using a map, prio 1 after other prio -5 gets resorted');}, 'dblclick.poi':function(){console.log('Registered double click with prio -5');}}, 'p', -5);
  600.     </p>
  601.     <p>
  602.         $j(document).onPrio({
  603.             'click.poi':function(){
  604.                 console.log('Registered using a map, prio 1 after other prio 1 gets resorted');
  605.                 console.log("   Show data from event.data:");
  606.                 for (var x in event.data) {
  607.                     console.log("      "+x+" hat den Wert "+event.data[x]);
  608.             }},
  609.             'dblclick.poi':function(){
  610.                 console.log('Registered double click with prio 1');
  611.                 console.log("   Show data from event.data:");
  612.                 for (var x in event.data) {
  613.                     console.log("      "+x+" hat den Wert "+event.data[x]);
  614.                 }
  615.             }}, 'p', {someData:'data'}, 1);
  616.     </p>
  617.     <p>
  618.         $j(document).onPrio({'click.poi':function(){console.log('Registered using a map, prio 7');}, 'dblclick.poi':function(){console.log('Registered double click with prio 7');console.log("   Show data from event.data:");
  619.             for (var x in event.data) {
  620.                 console.log("      "+x+" hat den Wert "+event.data[x]);
  621.             }}}, {someData:'data'}, 7);
  622.     <p>
  623.         $j('p').onPrio('click.poi', {some:'data'}, function(event){
  624.             console.log('3 Registered with data and 6 as prio');
  625.             console.log("   Show data from event.data:");
  626.             for (var x in event.data) {
  627.                 console.log("      "+x+" hat den Wert "+event.data[x]);
  628.             }
  629.         }, 6);
  630.     </p>
  631.     <br/>
  632.     <h3>
  633.         Changing the priority is accomplished through the following method. It doesn't matter on which
  634.         element the min/max priority is set as it's a global parameter shared by all instances.
  635.     </h3>
  636.     <p>
  637.         $j(document).onPriority('option', 'max_priority', 100);
  638.     </p>
  639.     <p>
  640.         $j(document).onPrio('click.poi', function(){console.log("I'm the first even when registered last. Prio is 100");}, 100);
  641.     </p>
  642. </body>
  643. </html>
RAW Paste Data