jQuery .trigger() 多個事件

Question

我正在編寫一個 jQuery 插件並使用.on和.trigger作為我的發布/ .trigger系統。 但是，我想在不同的場景中觸發多個事件。

這可以像.on方法一樣作為一個字符串來完成嗎？

目標：

$this.trigger("success next etc");    // doesn't work

當前解決方案：

$this
    .trigger("success")
    .trigger("next")
    .trigger("etc");                  // works, triggers all three events

有什么建議么？

Answer 1

JQuery 本身不支持觸發多個事件，但是您可以編寫自定義擴展方法triggerAll

(function($) {
    $.fn.extend({
        triggerAll: function (events, params) {
            var el = this, i, evts = events.split(' ');
            for (i = 0; i < evts.length; i += 1) {
                el.trigger(evts[i], params);
            }
            return el;
        }
    });
})(jQuery);

並像下面這樣調用它：

$this.triggerAll("success next etc");

Answer 2

你所擁有的很好......你不能使用逗號分隔的列表觸發多個事件。 trigger() 構造函數只接受一個事件名稱和可選的附加參數來傳遞給事件處理程序。

另一種選擇是觸發附加到元素的所有事件，但是，如果您需要在不同的場景中觸發特定事件，這可能無法滿足您的需求：

$.each($this.data('events'), function(k, v) {
    $this.trigger(k);
});​

Answer 3

以防萬一其他人在以后的生活中偶然發現這個問題，我通過創建一個自定義的 jQuery 函數解決了這個問題。

$.fn.triggerMultiple    =   function(list){
    return this.each(function(){
        var $this = $(this); // cache target

        $.each(list.split(" "), function(k, v){ // split string and loop through params
            $this.trigger(v); // trigger each passed param
        });
    });
};

$this.triggerMultiple("success next etc"); // triggers each event

Answer 4

因為，我沒有評論的特權，所以我想指出$this.data('events') doesn't work ，必須使用內部使用函數。 $._data($this[0], 'events')

Answer 5

您可以擴展原始.trigger()方法原型：

 (function($) { const _trigger = $.fn.trigger; $.fn.trigger = function(evtNames, data) { evtNames = evtNames.trim(); if (/ /.test(evtNames)) { evtNames.split(/ +/).forEach(n => _trigger.call(this, n, data)); return this; } return _trigger.apply(this, arguments); }; }(jQuery)); $("body").on({ foo(e, data) { console.log(e, data); }, bar(e, data) { console.log(e, data); }, baz(e, data) { console.log(e, data); }, }); $("body").off("bar"); // Test: stop listening to "bar" EventName $("body").trigger(" foo bar baz ", [{data: "lorem"}]); // foo, baz

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

代碼解釋

// Keep a reference to the original prototype
const _trigger = $.fn.trigger;

$.fn.trigger = function(evtNames, data) {

  // Remove leading and ending whitespaces 
  evtNames = evtNames.trim();

  // If the string has at least one whitespace
  if (/ /.test(evtNames)) {

    // Split names into Array (Treats multiple spaces as one)
    evtNames.split(/ +/)
    // Call the original .trigger() method for one eventName (and pass data)
      .forEach(n => _trigger.call(this, n, data));

    // End here.
    // Return this (Element) to maintain jQuery methods chainability for this override.
    return this;
  }

  // No whitespaces detected
  // Pass all arguments to the original .trigger() Method immediately.
  // The original method already returns this (Element), so we also need to 
  // return it here to maintain methods chainability when using this override. 
  return _trigger.apply(this, arguments);
};