[RESOLVED] add event listener to a object method

**jessPHP** · 09-20-2012 11:02 AM

Hi there!! I have a paragraph “<p>” element and I want to attach a click event to it. But I want that event to be executed by an object method and I do not know how to do it.

This is an example of what I want to do:

Code:


<html>
    <head>
        
        <title></title>
    <script type="text/javascript">
        
        var user;
       function load()
       {
        user=new User("john");
        user.loadclick();
       }
       function User(username) 
       {
           this.username=username;
       }
       
       User.prototype.loadclick=function()
       {
           parag=document.getElementById("parag");
           //parag.setAttribute("onclick","this.clickFunc()");//does not work
           parag.setAttribute("onclick","User.prototype.clickFunc()");//does not work, username undefined
       }

       User.prototype.clickFunc=function()
       {
           console.log("in click Func, username="+this.username);
       }
    </script>
    </head>
    <body onload="load()">
        <p id="parag">the text</p>
    </body>
</html>

I want to trigger “clickFunc” each time user click on the paragraph.

Could someone tell me how to do it??
Thank you very much!!!

**seniseven** · 09-20-2012 12:38 PM

try:

Code:

if (parag.addEventListener)  // for Mozilla and friends
    parag.addEventListener("click", this.clickFunc, false);
 else if (parag.attachEvent)  // for IE
   parag.attachEvent("onclick", this.clickFunc);

**DaveyErwin** · 09-20-2012 12:43 PM

Code:

<!doctype html>
<html>
    <head>
        
        <title></title>
    <script type="text/javascript">
        
        
   function load()
       {
        user=new User("john");
        user.loadclick();
       }
   function User(username){
       var username=username;       
       this.loadclick=function(){
           var parag=document.getElementById("parag");
           parag.onclick = clickFunc;
       }
       clickFunc=function(){
           alert("in click Func, username="+username);
       }
   }
    </script>
    </head>
    <body onload="load()">
        <p id="parag">the text</p>
    </body>
</html>

**jessPHP** · 09-21-2012 05:32 AM

Hi all!! thank you very much for response. seniseven, if I use your solution, the username is undefined. And I have to use the prototype object to create functions in JavaScript.

Do you know other solutions?? thank you very much!

**jessPHP** · 09-21-2012 06:19 AM

What do you think about this??

Code:

if (parag.addEventListener)  // for Mozilla and friends
    parag.addEventListener("click",this.clickFunc.bind(this),false);

That works!!!! thank you very much!!

**seniseven** · 09-21-2012 06:42 AM

I was suggesting my code to replace only your .setAttribute() method, not particularly for anything else. I did not check your code for the User object you created, for example.

You need to keep in mind that the DOM object (like a paragraph or div or span or any other DOM object) will have the .addEventListener() method in the browser you may be using for debugging.

But if you intend this code to be executed in IE, Chrome, Safari and other browsers, once you finish with yours, you may need to add cross-browser functionality to it especially for people running older versions of IE. The use of .addEventListener() will generate an error for them, which is why you need to know IE's version of it, method .attachEvent(), and why you also need to test your code in all the browsers where it will run. Yes, it is possible. Some people install Win95/98 and WinXP, and a distro of Linux in 3 or 4 virtual machines, then open the browser and your web page to see what gives. Be thorough as a web developer.

**jessPHP** · 09-21-2012 03:17 PM

Hi seniseven, you are right! I have to add the source code for IE. So this code:

Code:

if (parag.addEventListener)  // for Mozilla and friends
    parag.addEventListener("click",this.clickFunc.bind(this),false);
else if (parag.attachEvent)  // for IE
   parag.attachEvent("onclick", this.clickFunc.bind(this));

will be enough, won't it???

Also I have to test the "bind" function on IE. I am affraid it will not work.....

Thank you very much again!

**Kever** · 09-21-2012 05:06 PM

IF you need to support older browsers you can do

Code:

function bind(func, object) {
 return function(){
  return func.apply(object, arguments);
 };
};

parag.addEventListener("click", bind(this.clickFunc, this), false);

Thread: [RESOLVED] add event listener to a object method

Thread Tools

Display

[RESOLVED] add event listener to a object method

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions