jquery - 使用 JQuery 进行全局事件注册

Question

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

例如当执行 AJAX 请求时，我希望我的工具栏按钮“卡住”，并且在请求完成之前不会触发任何单击事件。这同样适用于我的 slider 控件和一些可拖动的 GUI 组件。

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

• 每个 gui 组件都可以在注册表中注册、删除、触发其事件
• 能够暂停事件(即，当我的应用状态处于某种状态时取消绑定(bind)它们，然后自动重新绑定(bind)它们)
• 将应用程序状态与 GUI 行为相匹配(例如，在绘图模式下，仅“退出绘图模式”按钮处于事件状态)

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

Answer 1

我将处理自定义事件的注册、触发和解除绑定(bind)。

jQuery 拥有注册、绑定(bind)和取消绑定(bind)自定义事件所需的所有工具。

下面是将两个 div 连接到名为 customAjaxStart 的自定义事件的示例。然后我可以触发这个函数，两个处理程序都会被调用。

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

例如

$( 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'); 
});

以上面为例，我将从全局ajaxStart触发customAjaxStart。每当即将进行 xhr 调用时，任何监听器都会自动触发(非常适合禁用小部件或显示加载 gif 等)，例如

$.ajaxStart( function(){

    $.event.trigger('customAjaxStart');

});