jQuery event namespace test

HTML

<button id = "shownButton">Trigger shown</button>
<br>
<button id = "fooButton">Trigger shown.foo</button>
<br>
<button id = "barButton">Trigger shown.bar</button>
<br>
<button id = "foobarButton">Trigger shown.foo.bar</button>
<br>
<button id = "barfooButton">Trigger shown.bar.foo</button>

<p id = "debug"></p>

JavaScript

$("body").on("shown.foo.bar", function(e) {
  $("#debug").append("Event namespace is '" + e.namespace + "'<br>");
});

$("#shownButton").click(function(e) {
  $("body").trigger("shown");
});

$("#fooButton").click(function(e) {
  $("body").trigger("shown.foo");
});

$("#barButton").click(function(e) {
  $("body").trigger("shown.bar");
});

$("#foobarButton").click(function(e) {
  $("body").trigger("shown.foo.bar");
});

$("#barfooButton").click(function(e) {
  $("body").trigger("shown.bar.foo");
});