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

Question

是否有一种简单明了的方法可以将这两个函数编写为一个函数而不重复。我想我想以编程方式设置开/关方法。

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

我想到的最简单的答案是

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

Answer 2

您可以使用 .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)