72

Here i cannot understand what is the basic difference between these two methods.

var events = require('events');
var eventEmitter = new events.EventEmitter();



var listner1 = function listner1() {
    console.log('listner1 executed.');
}

var listner2 = function listner2() {
    console.log('listner2 executed.');    
}

eventEmitter.addListener('connection', listner1);

eventEmitter.on('connection', listner2);

eventEmitter.emit('connection');
harsh_v
  • 3,193
  • 3
  • 34
  • 53
Rahul Kumar
  • 777
  • 1
  • 5
  • 14
  • possible duplicate of [In Node.js, what's "on"?](http://stackoverflow.com/questions/8281979/in-node-js-whats-on) – Urban Apr 25 '15 at 06:17
  • 1
    on(event, listener) Adds a listener to the end of the listeners array for the specified event. No checks are made to see if the listener has already been added. Multiple calls passing the same combination of event and listener will result in the listener being added multiple times. Returns emitter, so calls can be chained. – Rahul Kumar Apr 25 '15 at 06:22

5 Answers5

95

.on() is exactly the same as .addListener() in the EventEmitter object.

Straight from the EventEmitter source code:

EventEmitter.prototype.on = EventEmitter.prototype.addListener;

Sleuthing through the GitHub repository, there is this checkin from Jul 3, 2010 that contains the comment: "Experimental: 'on' as alias to 'addListener'".

Update in 2017: The documentation for EventEmitter.prototype.addListener() now says this:

Alias for emitter.on(eventName, listener).

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 3
    Then why two different methods are used ? There must be some logic behind it. – Rahul Kumar Apr 25 '15 at 06:07
  • 4
    @RahulKumar - I'm guessing here, but I would guess that `.addListener()` is likely the original and `.on()` was added as a shortcut (jQuery-like) - just less typing and preferred by some. – jfriend00 Apr 25 '15 at 06:08
  • 6
    @RahulKumar - I found the exact checkin that added `.on()` and the corresponding checkin comment - added to my answer above. The only thing I'm surprised by is that `.off()` is not there as an alias for `removeListener()`. – jfriend00 Apr 25 '15 at 06:26
  • EventEmitter.prototype.on = EventEmitter.prototype.addListener; @jfriend00 its just an assignment . It doesnt prove that both are exactly same. – Rahul Kumar Apr 25 '15 at 08:00
  • 3
    @RahulKumar - it proves that both methods have exactly the same function implementation. They literally call the exact same code. It means that `.on()` contains the exact same function reference that `.addListener()` does and thus each calls the exact same piece of code. It does prove they are identical. Plus I pointed you to a checkin comment that explains `.on()` is just an alias for `.addListener()`. I'm not sure what other proof you could be offered. You could step through `.on()` in the debugger and watch it just call the `.addListener()` implementation, I suppose. – jfriend00 Apr 25 '15 at 08:10
  • @jfriend00, like addListner() compliment is removeListner(),but I don't think .on() compliment is .off(). Here .on('save',...) is like 'on save event do ...'. So off does not make sense to me. – BangOperator May 22 '17 at 07:09
  • 1
    @BangOperator - Well, jQuery has had `.on()` as a means of adding an event listener and [`.off()`](http://api.jquery.com/off/) as a means of removing such a listener for a long number of years. That's where the thought comes from. And, if you're going to make a nice shortcut `.on()` to replace `.addListener()`, it makes sense you would also make a shortcut for `.removeListener()`. – jfriend00 May 22 '17 at 07:30
  • @jfriend00, yes you're right, but 'on' in jQuery might mean like turning something on or switch something on , but I think 'on' in node context means,'on some event occurence'. – BangOperator May 22 '17 at 07:38
  • 1
    @BangOperator - `.on()` in jQuery is exactly like `.addListener()` in node.js. It is no different at all. So, I don't see how it's fruitful to argue that node's `.on()` is somehow different. Anyway, node.js is what it is. No point in arguing further about a shortcut it does not have. – jfriend00 May 22 '17 at 07:41
3

Yes you can use "removeListener" with with a listener created with "on". Try it. 

var events = require('events');
var eventEmitter = new events.EventEmitter();

// listener #1
var listner1 = function listner1() {
   console.log('listner1 executed.');
}

// listener #2
var listner2 = function listner2() {
  console.log('listner2 executed.');
}

// Bind the connection event with the listner1 function
eventEmitter.addListener('connection', listner1);

// Bind the connection event with the listner2 function
eventEmitter.on('connection', listner2);

var eventListeners = require('events').EventEmitter.listenerCount(eventEmitter,'connection');
console.log(eventListeners + " Listner(s) listening to connection event");

// Fire the connection event 
eventEmitter.emit('connection');

// Remove the binding of listner1 function
eventEmitter.removeListener('connection', listner2);
console.log("Listner2 will not listen now.");

// Fire the connection event 
eventEmitter.emit('connection');

eventListeners = require('events').EventEmitter.listenerCount(eventEmitter,'connection');
console.log(eventListeners + " Listner(s) listening to connection event");

console.log("Program Ended.");
user4013241
  • 55
  • 1
  • 5
3

Added in: v10.0.0

emitter.off(eventName, listener)

Alias for emitter.removeListener()

0

Their functionalities are exactly the same, however, they can be used in different ways to make your code efficient. Lets assume you created a server and you create a listener, by using ".addListener(event, listener)", for every user that connects to your server. Now as soon as a user is disconnected, you can remove that listener by using the command "removeListener", but you cannot remove the ".on(event, listener)" command. So, you can use these two commands for different situations.

Shahrouz
  • 33
  • 1
  • 5
    this is false, events added with `on` can be removed with `removeListener` exactly the same as events added with `addListener`, `on` is simply a faster way of typing `addListener` – egerardus Jul 11 '17 at 21:06
  • addListener is more comprehensive in this context. add negated to be remove so it makes sense to be consistent in this context. – Emil Reña Enriquez Oct 26 '17 at 16:11
0

Also can ref to addEventListener vs onclick: Which one should you draft into your fantasy football team?

And can use HTML browser like events by event-target-shim, just what @flyskywhy/react-native-browser-polyfill did.

Li Zheng
  • 685
  • 7
  • 11