Namespaced jq Events

by tomprogramming

HTML

<div class="setup">
  <button data-event-type="click" data-namespace="namespace1">Add namespace1 click</button>
  <button data-event-type="click" data-namespace="namespace2">Add namespace2 click</button>
  <button data-event-type="click" data-namespace="">Add non-namespaced click</button>
  <br/>
  <button data-event-type="hover" data-namespace="namespace1">Add namespace1 hover</button> 
</div>
<div class="clear">
  <button data-event-type="click" data-namespace="namespace1">Clear namespace1 clicks</button>
  <button data-event-type="click" data-namespace="namespace2">Clear namespace2 clicks</button>
  <button data-event-type="click" data-namespace="">Clear all clicks</button>
  <br/>
  <button data-event-type="" data-namespace="namespace1">Clear all namespace1 events</button>
</div>
<div id="target">
</div>
<div id="log">
</div>

CSS

#target {
  width:50px;
  height:50px;
  background-color:rgba(65, 119, 214, .7);
  margin:20px;
}

JavaScript

$(".setup button").click(function(){
  var namespace = this.dataset.namespace;
  var eventName = this.dataset.eventType;
  if (namespace && namespace !== ''){
    eventName += "." + namespace;
  }
  $("#target").on(eventName, function(){
    $("#log").append("<div>Handling a " + eventName + " event</div>").trigger('change');
  });
});

$('.clear button').click(function(){
   var namespace = this.dataset.namespace;
  var eventName = this.dataset.eventType;
   if (namespace && namespace !== ''){
     eventName += "." + namespace;
   }
   $("#target").off(eventName);
});

$("#log").change(function(){
  var $this = $(this);
  while($this.find("div").length > 10){
   $this.find("div").first().remove(); 
  }
});