Object oriented Event handling in Javascript

JavaScript
1

Having trouble getting a button element to fire its onclick event properties once appended to a div element called scrollPanel which is also appended to a div element named panel body in the document tree.

Example:
Here is a simple version of the event I have tried to run….it works


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript" type="text/javascript">
		//Basic Test
		var hidebtn = document.createElement("input");
			hidebtn.type = "Submit";
			hidebtn.value = "Test Button";
			hidebtn.attachEvent("onclick",clickme);
			
		function clickme()
		{
		alert("yo");
		}			
			document.body.appendChild(hidebtn);
</script>
</body>
</html>

“But what I want to do, is have this button be part of a larger component with many different elements that I can instantiate many instances of and add to the page document”

This is how i have defined the test button object 


function Button()
	{
		this.btn = document.createElement("input");
		//this.setButton();
	}
	
	Button.prototype.setButton = function()
	{
		var oThis = this;
		this.btn.type = "Submit";
		this.btn.value = "Test Button";
		this.btn.title = "test";
		return this.btn;
	}
	
	Button.prototype.btnClick = function()
	{
		alert("yo");	
	}

i can create an instance of this and it appends to the div element okay shows up in the page document…

Now i attempt to add an event propertie to the button using attachEvent() method


	function Button()
	{
		this.btn = document.createElement("input");
		//this.setButton();
		
	}
	
	Button.prototype.setButton = function()
	{
		var oThis = this;
		this.btn.type = "Submit";
		this.btn.value = "Test Button";
		this.btn.title = "test";
		this.btn.onclick = 
		this.btn.attachEvent("onclick",oThis.btnClick(),true);	
		return this.btn;
	}
	
	Button.prototype.btnClick = function()
	{
		alert("yo");	
	}

Now the scrollpanel is created by another class called Directory
and its appendButton() method gets called from a asynchronous response…

inside the appendButton() i have declared the Button object variable and append it to the scroll panel…


Directory.prototype.appendButton = function()
	{
		var dPanel = document.getElementById("dpScroll");
		var btn = new Button();
		var myBtn = btn.setButton();
		alert(btn.constructor);
		dPanel.appendChild(myBtn); 	
	}

Problem
“the button shows up in the document okay but when i go to click it nothing happen’s”

i have tryed this

Example


function Button()
    {
        this.btn = document.createElement("input");
        //this.setButton();
    }
    
    Button.prototype.setButton = function()
    {
        var oThis = this;
        this.btn.type = "Submit";
        this.btn.value = "Test Button";
        this.btn.title = "test";
        this.btn.onclick = function()
       {
         alert("yo");
       }
        return this.btn;
    }

I can’t get the Button object to fire its onclick event…
funny thing is i have click events defined in the Directory class that work okay…
causing me confussion, would appreciate if any one can help me out…

2 
hidebtn.attachEvent("onclick",clickme);

In this code “clickme” is a reference to a function, so your attempt to assign it works correctly.

this.btn.attachEvent("onclick",oThis.btnClick(),true);

In this code you are not assigning a function “oThis.btnClick()” to event handler, but a result of executing that function, so it doesn’t work. There is no way to make that code work.

Do not try to assign onclick event that is a part of your class, it won’t work because when you click a button, all event has is variable “this” that points to button, it doesn’t have your button object.

What you need to do is assign your button object to one of button’s properties. I’m not sure how to do it in normal javascript, in jQuery I’d write this:

this.btn = document.createElement("input");
$(this.btn).data('item', this);

and then would assign event handler like this:

this.btn.attachEvent('onclick', function() { $(this).data('item').btnClick(); }, true);

That would be logical way of doing it, I’m not 100% if it would actually work because I never tried something like this.