全球事件注册表与JQuery [英] Global Event Registry with JQuery

问题描述

我正在JQuery开发一个基于AJAX的Web应用程序，其中包含许多GUI组件。有一些应用程序状态会影响所有GUI组件。

例如。在执行AJAX请求时，我希望我的工具栏按钮冻结，并且不会触发任何点击事件，直到请求完成。同样适用于我的滑块控件和一些可拖动的GUI组件。

为了缓解应用程序状态之间的转换，我想开发一个提供以下功能的全局事件注册表：

• 每个gui组件都可以在注册表中注册，删除，触发其事件


• 暂停事件（即在我的应用程序状态处于某种状态时解除绑定，然后自动重新绑定）


• 匹配应用程序声明为gui行为（例如在绘图模式下，只有退出绘图模式按钮有效）

有谁知道可以帮助我的jQuery插件？

解决方案

我将处理注册表，触发和解除绑定自定义事件。

jQuery具有所需的所有工具注册，绑定和取消绑定到自定义事件。

以下是将两个div挂接到一个名为customAjaxStart的自定义事件的示例。我可以触发这个功能，两个处理程序将被调用。

快速演示这里 - 启用firebug / ie8控制台。

例如

 code> $（function（）{
 
 $（'＃div1'）。bind（'customAjaxStart'，function（）{
 console.log（'＃div1 ajax start （$）
 $（this）.fadeTo（'slow'，0.3）; 
}）; 
 
 $（'＃div2'）bind（'customAjaxStart' ，function（）{
 console.log（'＃div1 ajax start fired'）; 
 $（this）.fadeTo（'slow'，0.3）; 
}）; 
 
 //触发自定义事件
 $ .event.trigger（'customAjaxStart'）; 
 
 //从定制事件中取消绑定div1 
 $（'＃div1 '）.unbind（'customAjaxStart'）; 
 
 //再次触发自定义事件 -  div1处理程序不会在此时启动
 $ .event.trigger（'customAjaxStart'）; 
}）;以b为例，我将从全局ajaxStart触发customAjaxStart。任何听众都将自动触发，无论何时出现xhr呼叫（理想情况是禁用您的小部件或显示加载gif等），例如
  $。ajaxStart（function（）{
 
 $ .event.trigger（'customAjaxStart'）; 
 
}）; 
  
 
I am developing a heavily AJAX-based web app in JQuery that includes many GUI components. There are some application states that affect all GUI components.

E.g. while an AJAX request is executed, I want my toolbar buttons to "freeze" and not trigger any click events until the request finished. The same applies to my slider control and some draggable GUI components.

To ease the transition between the app states, I want to develop a global event registry that offers the following features:


each gui component can register, remove, trigger its events within the registry
the ability to suspend events (i.e. unbind them while my app state is in a certain state and then automatically rebind them)
match app states to gui behaviours (e.g. in drawing mode, only the "Exit drawing mode" button is active)


Does anyone know about jQuery plugins that could assist me?
解决方案
I will tackle the register, triggering and unbinding of custom events.

jQuery has all the tools you need to register, bind and unbind to custom events. 

Below is an example of hooking up two divs to a custom event called customAjaxStart. I can then trigger this function and both handlers will get called. 

Quick Demo Here - Have the firebug/ie8 console enabled.

e.g
$( function() {

  $('#div1').bind('customAjaxStart', function(){
    console.log('#div1 ajax start fired');
    $(this).fadeTo('slow', 0.3);
  });

  $('#div2').bind('customAjaxStart', function(){
    console.log('#div1 ajax start fired');
    $(this).fadeTo('slow', 0.3);
  });

  //fire the custom event
  $.event.trigger('customAjaxStart');

  //unbind div1 from custom event
  $('#div1').unbind('customAjaxStart');

  //again trigger custom event - div1 handler will not fire this time
 $.event.trigger('customAjaxStart'); 
});
Taking the above as an example I would trigger the customAjaxStart from the global ajaxStart. Any listeners would be triggered automatically whenever an xhr call is about to be made (ideal for disabling your widgets or showing a loading gif etc) e.g
$.ajaxStart( function(){

    $.event.trigger('customAjaxStart');

});


                        
这篇关于全球事件注册表与JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！