JavaScript與命名空間事件

Question

有一個奇怪的行爲，當我使用命名空間事件，處理程序將始終被解僱。

<div id="div1"></div> 
<span id="span1">click</span> 
<span id="span2">click</span> 


$("#div1").on("click.me", function(event, data){ 
    $(this).append(data.from); 
}); 

$("#span1").on("click", function(event){ 
    $("div").trigger("click.me", [{from:"span1"}]); 
}); 

$("#span2").on("click", function(event){ 
    $("div").trigger("click", [{from:"span2"}]); 
}); 

因此，當我單擊span1和span2時，div將追加數據。這是爲什麼 ？我不是隻添加了特定於「click.me」的處理程序嗎？

我有它的jsfiddle http://jsfiddle.net/cY5sk/1/

Answer 1

沒我只加具體到 「click.me」 的處理程序？

不，這不是命名空間的工作方式。處理程序仍然綁定到特定的事件，但名稱空間爲您提供了引用它們的其他方法。處理程序屬於哪個名稱空間並不重要，如果事件被觸發，則調用該事件的所有處理程序，而不管屬於哪個名稱空間。

考慮：

$("#div1").on("click.me", function(event, data){ 
    $(this).append(data.from); 
}); 

$("#div1").on("click", function(event, data){ 
    $(this).append(data.from); 
}); 

$('div').trigger('click.me')只會觸發第一個處理程序，因爲您指定的me命名空間。但是，$('div').trigger('click')將觸發這兩個處理程序，而不管它們的名稱空間。

從documentation：

事件名稱可以通過簡化或去除觸發事件的事件名稱空間限定。例如，"click.myPlugin.simple"定義了此特定點擊事件的myPlugin和簡單名稱空間。

---

好像你正在尋找自定義事件，例如

$("#div1").on("foo", function(event, data){ 
    $(this).append(data.from); 
}); 

$("#span1").on("click", function(event){ 
    $("div").trigger("foo", [{from:"span1"}]); 
}); 

$("#span2").on("click", function(event){ 
    $("div").trigger("click", [{from:"span2"}]); 
});