在jquery

Question

是否可以一次使用jquery解除对多个命名空间自定义事件的绑定？

例如：自定义事件 -

resize.table-100
resize.table-101
resize.table-300

我试过了 -

$(window).unbind("resize.")

它会超出堆栈限制错误

修改

下面似乎有效，但是是否有更严格的事件命名可能会影响那些名称与上面包含表格的调整大小事件？

$(window).off("resize")

Answer 1

要仅删除具有指定命名空间的resize事件，您可以执行以下操作：

$(window).off("resize.table-100 resize.table-101 resize.table-300");

  

.off( events [, selector ] [, handler ] )：

     

事件   类型：字符串   一个或多个空格分隔的事件类型和可选的命名空间，或者只是名称空间，例如“click”，“keydown.myPlugin”或“.myPlugin”。

<强> 更新

在代码片段中，我使用函数扩展了jQuery，以便您可以编写类似的内容：

$(window).OffRegexNameSpaces("resize", /^table-\d{3}/);

为了从window元素中删除所有具有以“table-”开头并以3位结尾的命名空间的resize事件。 这是为了避免写：

$(window).off("resize.table-100 resize.table-101 resize.table-300");

段：

//
// OffRegexNameSpaces:
// parameters: event --> single event
// regexNamespace --> a regex pattern for namespaces
//
$.fn.OffRegexNameSpaces = function (event, regexNamespace) {
  if (typeof event !== 'string' && namespaces instanceof RegExp) {
    return this;
  }
  return this.each(function (index, element) {
    var elemData = $._data(this);
    var resultNamespaces = $.map(elemData.events[event], function (eventObj, index) {
      if (regexNamespace.test(eventObj.namespace)) {
        return event + '.' + eventObj.namespace;
      }
    }.bind(element));
    if (resultNamespaces.length > 0) {
      $(this).off(resultNamespaces.join(' '));
    }
  });
};


$(window).on('resize resize.table-100 resize.table-101 resize.table-300', function(e) {
  alert(e.type + ((e.namespace === undefined || e.namespace.length == 0) ? '' : '.' + e.namespace));
});

$(function () {
  $('#btn1').on('click', function(e) {
    $(window).trigger('resize.table-100');
  })
  $('#btn2').on('click', function(e) {
    $(window).trigger('resize.table-101');
  })
  $('#btn3').on('click', function(e) {
    $(window).trigger('resize.table-300');
  })
  $('#btn4').on('click', function(e) {
    $(window).trigger('resize');
  })

  $('#btnUnbind').on('click', function(e) {
    $(window).off("resize.table-100 resize.table-101 resize.table-300");
  })

  $('#btnUnbindAll').on('click', function(e) {
    $(window).OffRegexNameSpaces("resize", /^table-\d{3}/);
  })
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button id="btnUnbind">UnBind all resize events with namespaces</button>
<button id="btnUnbindAll">UnBind all resize events</button>
<button id="btn1">Trigger resize.table-100</button>
<button id="btn2">Trigger resize.table-101</button>
<button id="btn3">Trigger resize.table-300</button>
<button id="btn4">Trigger resize</button>