Question

通常情况下，我需要在某些自定义项中添加一些事件，然后在页面就绪时应用这些自定义项。

通常我这样做：

        $(window).resize(function(){
            //some code
        }).resize(); //trigger it when event defined

这个解决方案的问题是，如果我有很多调整大小事件，那么如果我这样触发它 - 它也将重新执行所有先前定义的事件。

所以另一个解决方案可能是：

    var myCallback = function(){ /*some code*/ };
    $(window).resize(function(){
        myCallback();
    });
    myCallback();

它做得恰到好处，但我发现它不是那么好看的代码，并且内部函数没有this更改为事件目标DOM元素，它经常非常有用。

很棒就像是

$(window).addEventAndFireOnce("resize", function(){});

这样的功能并不难实现，但我想知道js或jQuery中是否存在类似的东西。

Answer 1

我不知道我是否独自一人，但如果我需要这样做（并且这并不罕见）我在绑定真实的同时绑定自定义事件名称（可能与范围）事件（“点击”或“更改”或其他）：

var myCallback = function(ev) { ... };

$(window).on("resize my-resize", myCallback).trigger("my-resize");

当您在复选框上处理类似“点击”事件的内容时，这尤其有用。触发“点击”实际上会更新复选框“已检查”状态，这通常不是您想要做的。有jQuery .triggerHandler()方法，但无论出于什么原因只能在jQuery对象的第一个元素上运行，所以你不能通过一次调用触发表单中所有复选框的处理程序。

Answer 2

我会这样写：

var myCallback = function(){ /*some code*/ };
$(window).resize( myCallback );
myCallback();

Answer 3

我认为你在这里寻找的是命名空间处理程序

var log = (function() {
  var $log = $('#log');
  return function(msg) {
    $('<p/>', {
      text: msg
    }).appendTo($log)
  }
})();

$(window).resize(function() {
  log('handler 1');
});
$(window).resize(function() {
  log('handler 2');
});

$(window).on('resize.myspecial', function() {
  log('handler 3');
}).trigger('resize.myspecial');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="log"></div>

jQuery添加事件并立即执行它

3 个答案: