綁定到自定義jquery事件的所有命名空間

我試圖傾聽自定義事件，但我想有效'忽略'它的名稱空間或以某種方式偵聽所有名稱空間而不單獨定義它們的事實。綁定到自定義jquery事件的所有命名空間

$('#test').on('custom', ...); 

$('#test').trigger('custom.namespace1'); 
$('#test').trigger('custom.namespace2');

我希望能夠做到這一點的原因是因爲我有多個UI插件的時候都隱藏/顯示，起火事件。這些事件主要在內部使用，但名稱空間不會相互碰撞。不過，我也想知道何時隱藏了某個特定的UI元素，而不依賴於其來源來執行其他清理邏輯。

在上面的例子中，沒有什麼會發生，因爲觸發器事件是命名空間。我可以用custom.*的效果來聽所有命名空間嗎？

Fiddle demonstrating the problem。

感謝

編輯

即使是這樣的希望，但仍無法得到它的工作

$('#test').on('custom.global', log); 

$('#test').trigger('custom.global.namespace1'); 
$('#test').trigger('custom.global.namespace2');

Fiddle

來源

2012-09-25 jschr

我證明這樣做對這個問題的方法：HTTP：//計算器。com/questions/10176607/jquery-bind-namespaces-events/12606252＃12606252它可能有幫助，可能不會。 –

我擔心的唯一方法將它們列爲所有方法的第一個參數...

$('#test').on('custom.ns1 custom.ns2 ...', function(evt){});

這意味着惱人的代碼審查時，該插件得到更新...

來源

2012-09-25 20:17:47 Stphane

不幸的是，似乎並非如此，請參閱我編輯的小提琴演示問題。我也不能簡單地使用'.is（'：hidden'）'，因爲我需要能夠監聽什麼時候元素被隱藏起來 – jschr

可以在DOM樹中深入捕獲事件，防止冒泡'：/'..關於隱藏部分，這並不是真正的測試，如果它是「明顯隱藏」的'：p'，但捕獲一個事件會指示'小部件被隱藏'正確嗎？ – Stphane

對不起，是的，這是關於何時隱藏或顯示特定的模塊/小部件。更具體地說，我有一個工具提示的小部件，如果他們在Tab或Modal中，我希望能夠工作。我希望能夠知道父項何時被隱藏（可以是選項卡或模式），以便我可以隱藏工具提示。我將不得不考慮stopPropagation方法，它可以工作，但絕對不是理想的。謝謝回覆。 – jschr

嘗試triggerAll，而不是trigger：

(function($) { 
    $.fn.triggerAll = function(topics, data, delimiter) { 
     return this.each(function() { 
      var $this = $(this), chain = [], t = ''; 
      delimiter = (delimiter || '.'); 
      // rebuild chain 
      $.each(topics.split(delimiter), function(i,n) { 
       t += (i == 0 ? '' : delimiter) + n; 
       chain.push(t); 
      }); 

      // append/prepend original topic? 
      data = (data || []); 
      data.push(topics); 
      $.each(chain, function(i,t) { 
       $this.trigger(t, data); 
      }); 
     }); 
    }; 
})(jQuery);

誠然，由於jQuery的如何處理觸發命名空間，引發了「根「事件實際上會激發命名空間版本，所以爲了得到你所期望的，你需要使用另一個字符作爲分隔符，如/，然後聲明你的事件如：

var $o = $('#whatever'); 
// this will be triggered for all events starting with 'root' 
$o.on('root', function() { console.log(Array.prototype.slice.call(arguments, 0)); }); 
// some arbitrary way to fire custom events 
$o.on('click', function() { 
    $o.triggerAll('root/custom1/subA', ['1st', '2nd'], '/'); 
    $o.triggerAll('root/custom2', [3, 4, 5], '/'); 
});

例in this fiddle

來源

2013-02-20 22:36:43 drzaus

等一下...這是不正確的...需要建立每個不斷增加的鏈。 – drzaus

更新和修復，現在它更復雜。 – drzaus

我只是碰到了這一點，這裏是我的解決方案。 Javascript是一種有趣的語言，事件只是字符串。爲什麼不事先定義你的事件，只是動態地將它們添加到「全部」事件？無需擔心不同步。

無論你想要什麼，你都可以擴展它。當一個小部件被註冊後，讓它註冊並附加到列表中。使用一個數組，只需要myEvents.join(" ")來生成所有這些數組。在應用程序引導程序中，執行以下操作並將對象中的所有鍵添加到「全部」事件。無論你想做什麼都很好。

PS。該「發泄」比如我用的就是來自：https://github.com/reedspool/jquery-event-aggregator/blob/master/eventAggregator.jquery.js

var stand_in = {}, 
 
    $stan = $(stand_in), 
 
    // Don't give Stan to anyone else, he's precious 
 
    $empty = $(), 
 
    trigger = function(name, ...args) { 
 
     $stan.trigger.apply($stan, arguments); 
 
     return $empty; 
 
    }, 
 
    on = function(name, fn) { 
 
     $stan.on(name, function(evt, obj) { 
 
     // Shed the event object, who needs it? 
 
     fn(obj); 
 
     }); 
 

 
     return $empty; 
 
    }; 
 
    
 
var Vent = { 
 
    trigger: trigger, 
 
    on: on 
 
}; 
 
    
 
var events = { 
 
    All: "", 
 
    Custom1: "my1.event", 
 
    Custom2: "my2.event" 
 
} 
 

 
for (var evt in events) { 
 
\t if (events.hasOwnProperty(evt) && evt !== 'All') { 
 
    events.All += events[evt] + " "; 
 
    } 
 
} 
 

 
Vent.on(events.Custom1, function() { alert(events.Custom1 + " trigger")}); 
 
Vent.on(events.All, function() { alert(events.All + " trigger")}); 
 

 
$("#btn").on('click', function() { 
 
\t Vent.trigger(events.Custom1); 
 
}); 
 
$("#btn2").on('click', function() { 
 
\t Vent.trigger(events.Custom2); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id="btn"> 
 
Press Me 
 
</button> 
 
<button id="btn2"> 
 
Press Me 2 
 
</button>

來源

2016-08-26 19:48:30 kamranicus

綁定到自定義jquery事件的所有命名空間

回答

相關問題