What is an "event emitter"?

javascript events event-handling dom-events
wwaawaw picture wwaawaw · Nov 18, 2012 · Viewed 61.3k times · Source

Browsing through http://microjs.com, I see lots of libraries labelled "event emitters". I like to think I know my way around the basics of the Javascript language pretty well, but I really have no idea what an "event emitter" is or does.

Anyone care to enlighten me? It sounds interesting...

Answer

niaher picture niaher · Nov 18, 2012

It triggers an event to which anyone can listen. Different libraries offer different implementations and for different purposes, but the basic idea is to provide a framework for issuing events and subscribing to them.

Example from jQuery:

// Subscribe to event.
$('#foo').bind('click', function() {
    alert("Click!");
});

// Emit event.
$('#foo').trigger('click');

However, with jQuery in order to emit an event you need to have a DOM object, and cannot emit events from an arbitrary object. This is where event-emitter becomes useful. Here's some pseudo-code to demo custom events (the exact same pattern as above):

// Create custom object which "inherits" from emitter. Keyword "extend" is just a pseudo-code.
var myCustomObject = {};
extend(myCustomObject , EventEmitter);

// Subscribe to event.
myCustomObject.on("somethingHappened", function() { 
    alert("something happened!");
});

// Emit event.
myCustomObject.emit("somethingHappened");

Related questions

jQuery equivalent of JavaScript's addEventListener method

I'm trying to find the jQuery equivalent of this JavaScript method call: document.addEventListener('click', select_element, true); I've gotten as far as: $(document).click(select_element); but that doesn't achieve the same result, as the last parameter of the …

Read More
How can I capture the right-click event in JavaScript?

I want to block the standard context menus, and handle the right-click event manually. How is this done?

Read More
event.preventDefault() vs. return false (no jQuery)

I wondered if event.preventDefault() and return false were the same. I have done some tests, and it seems that If the event handler is added using old model, for example elem.onclick = function(){ return false; }; Then, return false prevents …

Read More