JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="contentArea">
</ul>
CSS
li.event {
color: green;
}
JavaScript
function eventHandler() {
$('#contentArea').append('<li class="event">' + this.name + ': ' + this.team.join(', ') + '</li>');
}
var eventSource = {};
var firstContext = {
name: 'Marx Brothers'
, team: ['Groucho', 'Chico', 'Zeppo', 'Harpo']
};
var secondContext = {
name: 'Team Possible'
, team: ['Kim Possible', 'Ron Stoppable']
};
var eventHandler$firstContext = $.proxy(eventHandler, firstContext);
var eventHandler$secondContext = $.proxy(eventHandler, secondContext);
$('#contentArea').append('<li>No Handlers</li>');
$(eventSource).trigger('customEvent');
$('#contentArea').append('<li>2 Handlers</li>');
$(eventSource).bind('customEvent', eventHandler$firstContext);
$(eventSource).bind('customEvent', eventHandler$secondContext);
$(eventSource).trigger('customEvent');
$('#contentArea').append('<li>Remove First Handler</li>');
$(eventSource).unbind('customEvent', eventHandler$firstContext);
$(eventSource).trigger('customEvent');
$('#contentArea').append('<li>Remove Second Handler</li>');
$(eventSource).unbind('customEvent', eventHandler$secondContext);
$(eventSource).trigger('customEvent');