jQuery 事件处理程序到 ALSO 运行第一次被调用

Question

我需要运行一次事件处理程序，当 on 被调用时，除了在 change 上。我有一个 <select> 可以在更改时更改页面的行为。它还为该按钮设置了一个默认值，这就是为什么 change 处理程序应该运行第一次甚至在实际 change 发生之前。

例子（实际代码要复杂得多）：

<select id="sel"><option>A<option>B<option>C</select>
<a id="go" href="#">Go</a>
<script>
    var base = "/act/";
    function update_go(){
        $('#go').prop('href',base+$(this).val());
    }
    $('#sel')
        .on('change',update_go) // update button when select is changed
        .each(update_go); // update button with the default value of the select 
    // todo: check: when select value is remembered by browser, does it work as it should?
</script>

我想扩展 jQuery 事件，允许在调用 .on 时总是运行一次的事件。这样我就可以省略 .each 并使用内联匿名函数。类似的东西：

    $('#sel').on('change runonce',function(){
            $('#go').prop('href',base+$(this).val());
    });

我不想调用 .trigger('change')，因为它可能运行我不知道的事件处理程序。此外，当涉及许多元素时，调用 trigger 的成本非常高；这就是为什么我不想打电话给 trigger('runonce').

使用 each 或函数调用工作得更快，看起来也不错，但它需要为每个事件指定一个函数。

谢谢

JSFiddle： https://jsfiddle.net/oriadam/Lu9ym1xy/13/

JSPerf： http://jsperf.com/jquery-custom-trigger-vs-each-vs-function-call1

Answer 1

更新的答案：

您可以创建自定义事件以满足您的需要：

(function() {
  var originalJqOn = jQuery.fn.on;
  jQuery.fn.extend({
    onAndFirst: function(evtName, fn) {
      fn();
      this.on(evtName, fn);
    }
  });
})();

var base = "/act/";
var update_go = function() {
  // in first run "this" equals the global window object
  if (this === window) {
    $('#go').prop('href', base + $("#sel").val());
    console.log("href set to: " + $("#sel").val());
  } else {
    $('#go').prop('href', base + $(this).val());
    console.log("href changed to: " + base + $(this).val());
  }
};

$('#sel').onAndFirst('change', update_go);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel"><option>A<option>B<option>C</select>
<a id="go" href="#">Go</a>

这里有一个JsFiddle:https://jsfiddle.net/2zg8dgf4/2/

JsBin（查看日志）：http://jsbin.com/wetocayala/1/edit?html,js,console,output

资源：https://learn.jquery.com/plugins/basic-plugin-creation/

window 对象存在一个问题（请参阅我的解决方案中的评论），您应该考虑它正在处理（这实际上取决于您将如何在实际情况中使用它你正在处理，由你决定。

原回答：

我会使用函数调用，稍作改动：

// function
var first_and_change_call=function(){
   update_selected(this);
}.call($('#sel_call')[0]);

更新Fiddle：https://jsfiddle.net/Lu9ym1xy/14/

如果您需要更复杂的东西，请提供更多详细信息。

Answer 2

// call the handler immediately in addition to being triggered by event
jQuery.fn.onAndNow = function(events, func) {
    // TODO: Support the data object
    return this.each(func).on(events, func);
  };
///////////////////////////////////

// usage example:
$('#select').onAndNow('change', function() {
  var val = $(this).val();
  $('#go').prop('href', '//example.com/?' + val).html('Go to ' + val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
    <option>save a life</option>
    <option>eat spaghetti</option>
</select>
<a id="go" target="_blank">Go nowhere?</a>

https://jsfiddle.net/oriadam/v91wepuk/

jQuery 事件处理程序到 ALSO 运行第一次被调用

jQuery event handler to ALSO run first time it is called

jquery

jquery-events

jQuery 事件处理程序到 ALSO 运行 第一次被调用

jQuery event handler to ALSO run first time it is called

jquery

jquery-events

jQuery 事件处理程序到 ALSO 运行第一次被调用