I'm trying to utilized a more object-oriented approach to managing
window events in javascript. Thus, I am creating a "controller " object
to handle events and interact with the server. However, I apparently
don't fully understand what "this" refers to. In the code below I was
expecting that when the button was clicked (handleDeleteBu ttonClicked
function) that "this" would be pointing at a ViewController object.
Instead it was the Button (HtmlInputEleme nt).
Can somebody help me understand?
<html>
<head>
<script>
/* Constructor */
function ViewController( ) {
this.foo = "bar";
}
/* delete button handler */
ViewController. prototype.handl eDeleteButtonCl icked = function() {
window.alert("d elete clicked, this=" + this + " this.foo= " +
this.foo);
};
/* initializer */
ViewController. prototype.initi alize = function() {
document.getEle mentById("delet e-button").onclic k =
this.handleDele teButtonClicked ;
};
</script>
</head>
<body onload="javascr ipt:new ViewController( ).initialize(); ">
<input id="delete-button" type="button" value="Delete">
</body>
</html>
