Object oriented Javascript: event handling

Question

I'm trying to create an event for an object to have it listen to it. Consider the following example:

var moon;

moon = document.createEvent("Event");
moon.initEvent("Event",true,true);

var Dog = function (name) {
  this.name = name;
  
  document.addEventListener("Event",this.bark,false);
};
dog.prototype.bark = function() {
  console.log(this.name + ': Awooooooof Woof!');
};


var spot = new Dog("Spot");
var dot = new Dog("Dot");


//invoke
document.dispatchEvent(moon);

I'm expecting to receive an output like:

Spot: Awooooooof Woof!

Dot: Awooooooof Woof!

But what I get is:

undefined: Awooooooof Woof!

What is wrong with my example? How can I register a listener that every instance of Dog has?

Fabian Schmengler · Accepted Answer · 2013-03-12 09:36:36Z

10

In this line

document.addEventListener("Event",this.bark,false);

you don't bind the scope of this.bark to this. In JavaScript, the value of this does not depend on where the function is defined but from where it is called. This means when you pass this.bark to addEventListener you detach it from the current object.

In frameworks like prototype.js and JQuery there are shortcuts for binding this, with vanilla JavaScript you can do it like this:

function bind(scope, fn) {
   return function() {
      return fn.apply(scope, arguments);
   }
}

And then:

document.addEventListener("Event",bind(this, this.bark),false);

answered Mar 12, 2013 at 9:36

Fabian Schmengler

24.6k9 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alessandro Cappello Over a year ago

Thank you very much! I figured out how to achieve it with jQuery, but I think that your solution is more elegant.

Mikael Östberg · Accepted Answer · 2013-03-12 09:31:44Z

4

The problem you have is that this inside the function does not refer to the object you want to manipulate.

How about adding the function bark inside the function definition?

var Dog = function (name) {
    this.name = name;    
    this.bark = function() {
        console.log(name + ': Awooooooof Woof!');
    };
    document.addEventListener("Event", this.bark, false);
};

answered Mar 12, 2013 at 9:31

Mikael Östberg

17.2k6 gold badges67 silver badges80 bronze badges

Comments

Nocturno · Accepted Answer · 2016-09-21 19:55:12Z

The Problem

The this keyword, inside Dog.prototype.bark() points to the object that invoked the method. For example, when spot.bark() is called, this.name evaluates to spot.name, like so:

Dog.prototype.bark = function () {
    console.log(spot.name + ': Awooooooof Woof!');
};

When the event listener is added inside Dog's constructor, the document object is told to listen for that event, and told to call Dog.prototype.bark() when it hears that event. This setup is done correctly and the document object will call the correct function when it hears that event,

The trouble happens later when the document object actually calls the bark function. Now, this points to the document object, and this.name evaluates to document.name, like so:

Dog.prototype.bark = function () {
    console.log(document.name + ': Awooooooof Woof!');
};

document.name doesn't exist and that's why the output is: undefined: Awooooooof Woof!

The Fix

Use Function.prototype.bind() to bind the provided value to a function's this keyword, like so:

document.addEventListener("Moon", this.bark.bind(this), false);

Collectives™ on Stack Overflow

Object oriented Javascript: event handling

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related