JavaScript: bind an object's method to event handler

In any object method, this always refers to the object the method has been called on. It's true for all JavaScript that this provides the calling context, not the method owner ^(*).

var sample = {
    foo: function () {
        this.clicked = true;
    }
}

sample.foo();         // 'this' refers to 'sample' 
alert(sample.clicked) // true

In an event handler this refers to the element that triggered the event. This means when you pass an object method to the click event...

var div = document.getElementById("test");
div.onclick = sample.foo;

then foo() will be called on the DOM element, even though it has been defined elsewhere.

/* ... click the div ... */ 

alert(sample.clicked); // false
alert(div.clicked);    // true

which will lead to unexpected results.

^(*) That's because technically there is no method owner in JavaScript. Methods are standalone functions that happen to be referenced by object properties. Storing a reference to the same function in a different object (div.onclick = sample.foo does just that) is easily possible.

Consequently, obj.method() is syntactic sugar.

function func() { /* ... */ }
var obj = {
    method: func
};

obj.method();
func.call(obj);  // same thing

You can also use Function.prototype.bind to get around this

elem.onclick = Button.click.bind(Button);

Note .bind requires ECMAScript >= 5

What Mr. Resig is talking about is the fact that in JavaScript, this gets a value in a way that's distinctly different from how this works in some other languages. In this example, I think his point is that the reference to this in the "click" function on that "Button" object doesn't necessarily refer to that object. Instead, its value is determined only by the situation in which the function is called.

Thus, when you use that function as an event handler, the value of this in the function will be a reference to the element that was clicked.

Here's a simple example, without events.

var foo = {
  method: function() {
    this.prop = true;
  }
};

var bar = {};

bar.method = foo.method;
bar.method();

console.log( foo.prop ); // => undefined
console.log( bar.prop ); // => true

foo.method();

console.log( foo.prop ); // => true

It seems like in your example, you're checking the state of elem.clicked before clicking the element. Click it, and the property will get set (but Button.clicked won't be set!). The correct way to do this is simply:

elem.onclick = function() { Button.click(); };