如何以编程方式附加和删除事件处理程序

Question

有没有一种简单明了的方法可以将这两个函数写成一个函数而不重复。我想我想以编程方式设置 on/off 方法。

function attachEventHandler(){
   $(document).on({
      ajaxStart: function() {
         $("body").addClass("loading");
      },
      ajaxStop: function() {
         $("body").removeClass("loading");
      }
   });
}

function removeEventHandler(){
   $(document).off({
      ajaxStart: function() {
         $("body").addClass("loading");
      },
      ajaxStop: function() {
         $("body").removeClass("loading");
      }
   });
}

Answer 1

您可以使用 .on() 将一个函数绑定到多个事件：

$('#element').on('keyup keypress blur change', function(e) {
// e.type is the type of event fired
});

或者只是将函数作为参数传递给普通事件函数：

var myFunction = function() {
...
}

$('#element')
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)
.change(myFunction)

Answer 2

我想到的最简单的答案是

var handlers = {
      ajaxStart: function() {
         $("body").addClass("loading");
      },
      ajaxStop: function() {
         $("body").removeClass("loading");
      }
   }

function attachEventHandler(toggle){
   // here we are selecting the 'on' or 'off'
   // property of the $(document) jquery element
   // depending on whether the toggle is true or
   // false. Because the 'on' and 'off' props are
   // functions, we can call the property with
   // `handlers` as the argument
   $(document)[toggle ? 'on' : 'off'](handlers);
}

并像这样使用它：

attachEventHandler(true) // turn on
attachEventHandler(false) // turn off

如何以编程方式附加和删除事件处理程序

How to attach and remove an event handler programmatically

jquery

programmatically