SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    object oriented Event handling in Javascript

    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
    Code JavaScript:
    <!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
    Code JavaScript:
    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

    Code JavaScript:
    	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....
    Code JavaScript:
    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
    Code JavaScript:
    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. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    hidebtn.attachEvent("onclick",clickme);
    In this code "clickme" is a reference to a function, so your attempt to assign it works correctly.

    Code:
    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:
    Code:
    this.btn = document.createElement("input");
    $(this.btn).data('item', this);
    and then would assign event handler like this:
    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •