Object-Oriented JavaScript Event Handlers

By Bret Taylor, July 26, 2006

Event-handling in JavaScript is generally done with function closures and function callbacks:

function handleClick() {
    alert("You clicked the button!");
}
var button = document.getElementById("button");
button.onclick = handleClick;

In object-oriented JavaScript programs, you often want to bind events to methods on an object instance rather than a global function. This recipe for callback demonstrates an easy way to accomplish that:

function callback(instance, method) {
    return function() {
        method.apply(instance, arguments);
    }
}

callback takes the object instance as the first argument and the function/method you want to call on that object as the second argument. It takes advantage of the apply method to pass arguments from the event handling function to the callback method. Example usage:

function Adder() {
    this.value = 0;
}

Adder.prototype.addOne = function() {
    this.value++;
}

var adder = new Adder();
var button = document.getElementById("button");
button.onclick = callback(adder, adder.addOne);

See the example

Digg  del.icio.us  Reddit

Comments

On February 28, 2007, mrazvan wrote
I sank my head into this problem for an hour before finally deciding to google it.
Your example is exactly what I was looking for, although I haven't still fully understood it. I'm working on that though.
Thx again.
On March 5, 2007, Nice wrote
Great Article
On March 9, 2007, Mariotto wrote
All products appruved to FDA and recomendet doctors:
http://www.dwarf.name/51 <a href="http://www.dwarf.name/51">Viagra</a> [url=http://www.dwarf.name/51]Viagra[/url]
http://www.dwarf.name/52 <a href="http://www.dwarf.name/52">Phentermine</a> [url=http://www.dwarf.name/52]Phentermine[/url]
http://clomid.fe.pl/ <a href="http://clomid.fe.pl/">Clomid</a> [url=http://clomid.fe.pl/]Clomid[/url]
http://www.jnj.com/leaving.jsp?url=http%3A//w-drugs.com/Rx_viagra.htm&domain=w-drugs.com <a href="http://www.jnj.com/leaving.jsp?url=http%3A//w-drugs.com/Rx_viagra.htm&domain=w-drugs.com">Buy Viagra</a> [url=http://www.jnj.com/leaving.jsp?url=http%3A//w-drugs.com/Rx_viagra.htm&domain=w-drugs.com]Buy Viagra[/url]
http://www.cpcri.org/frame.aspx?URL=http://w-drugs.com/Rx_viagra.htm <a href="http://www.cpcri.org/frame.aspx?URL=http://w-drugs.com/Rx_viagra.htm">Viagra</a> [url=http://www.cpcri.org/frame.aspx?URL=http://w-drugs.com/Rx_viagra.htm]Viagra[/url]
http://www.desiurl.com/4c858 <a href="http://www.desiurl.com/4c858">hannah montana</a> [url=http://www.desiurl.com/4c858]hannah montana[/url]
http://www.desiurl.com/b3ac0 <a href="http://www.desiurl.com/b3ac0">pam anderson</a> [url=http://www.desiurl.com/b3ac0]pam anderson[/url]
http://www.desiurl.com/645b2 <a href="http://www.desiurl.com/645b2">Penis Enlarge Patch</a> [url=http://www.desiurl.com/645b2]Penis Enlarge Patch[/url]
http://www.desiurl.com/5996a <a href="http://www.desiurl.com/5996a">Anatrim</a> [url=http://www.desiurl.com/5996a]Anatrim[/url]
http://www.desiurl.com/bc733 <a href="http://www.desiurl.com/bc733">Ultra Allure</a> [url=http://www.desiurl.com/bc733]Ultra Allure[/url]
http://www.desiurl.com/6a550 <a href="http://www.desiurl.com/6a550">Regenesis HGH</a> [url=http://www.desiurl.com/6a550]Regenesis HGH[/url]
http://www.desiurl.com/9271b <a href="http://www.desiurl.com/9271b">Advanced Gain Pro</a> [url=http://www.desiurl.com/9271b]Advanced Gain Pro[/url] and http://moto.blogserv.biz <a href="http://moto.blogserv.biz">Moto</a> [url=http://moto.blogserv.biz]Moto[/url]
http://shopping.blogserv.biz <a href="http://shopping.blogserv.biz">shopping</a> [url=http://shopping.blogserv.biz]shopping[/url]
http://finance.blogserv.biz <a href="http://finance.blogserv.biz">Finance</a> [url=http://finance.blogserv.biz]Finance[/url]
By!
On March 9, 2007, Mariotto wrote
All products appruved to FDA and recomendet doctors:
http://www.dwarf.name/51 <a href="http://www.dwarf.name/51">Viagra</a> [url=http://www.dwarf.name/51]Viagra[/url]
http://www.dwarf.name/52 <a href="http://www.dwarf.name/52">Phentermine</a> [url=http://www.dwarf.name/52]Phentermine[/url]
http://clomid.fe.pl/ <a href="http://clomid.fe.pl/">Clomid</a> [url=http://clomid.fe.pl/]Clomid[/url]
http://www.jnj.com/leaving.jsp?url=http%3A//w-drugs.com/Rx_viagra.htm&domain=w-drugs.com <a href="http://www.jnj.com/leaving.jsp?url=http%3A//w-drugs.com/Rx_viagra.htm&domain=w-drugs.com">Buy Viagra</a> [url=http://www.jnj.com/leaving.jsp?url=http%3A//w-drugs.com/Rx_viagra.htm&domain=w-drugs.com]Buy Viagra[/url]
http://www.cpcri.org/frame.aspx?URL=http://w-drugs.com/Rx_viagra.htm <a href="http://www.cpcri.org/frame.aspx?URL=http://w-drugs.com/Rx_viagra.htm">Viagra</a> [url=http://www.cpcri.org/frame.aspx?URL=http://w-drugs.com/Rx_viagra.htm]Viagra[/url]
http://www.desiurl.com/4c858 <a href="http://www.desiurl.com/4c858">hannah montana</a> [url=http://www.desiurl.com/4c858]hannah montana[/url]
http://www.desiurl.com/b3ac0 <a href="http://www.desiurl.com/b3ac0">pam anderson</a> [url=http://www.desiurl.com/b3ac0]pam anderson[/url]
http://www.desiurl.com/645b2 <a href="http://www.desiurl.com/645b2">Penis Enlarge Patch</a> [url=http://www.desiurl.com/645b2]Penis Enlarge Patch[/url]
http://www.desiurl.com/5996a <a href="http://www.desiurl.com/5996a">Anatrim</a> [url=http://www.desiurl.com/5996a]Anatrim[/url]
http://www.desiurl.com/bc733 <a href="http://www.desiurl.com/bc733">Ultra Allure</a> [url=http://www.desiurl.com/bc733]Ultra Allure[/url]
http://www.desiurl.com/6a550 <a href="http://www.desiurl.com/6a550">Regenesis HGH</a> [url=http://www.desiurl.com/6a550]Regenesis HGH[/url]
http://www.desiurl.com/9271b <a href="http://www.desiurl.com/9271b">Advanced Gain Pro</a> [url=http://www.desiurl.com/9271b]Advanced Gain Pro[/url] and http://moto.blogserv.biz <a href="http://moto.blogserv.biz">Moto</a> [url=http://moto.blogserv.biz]Moto[/url]
http://shopping.blogserv.biz <a href="http://shopping.blogserv.biz">shopping</a> [url=http://shopping.blogserv.biz]shopping[/url]
http://finance.blogserv.biz <a href="http://finance.blogserv.biz">Finance</a> [url=http://finance.blogserv.biz]Finance[/url]
By!
On May 20, 2007, Stephen Baker wrote
Genius! The apply method should be documented in every JavaScript tutorial, particularly every one that relates to events or user defined objects.
On September 4, 2007, Dirty wrote
I'm dead unless i find £2000 by tommorow night, this javascript might just save my neck!!

Write a Comment