How to add addEventListener in .js file with function in .aspx page?

[sangam56]

Hi all,
I want to add listener to a div element from .js file. All the controls are being created in the .js file and then loaded in the .aspx page. The problem is that I cannot use jquery or prototype to add observe event to the div control from my .aspx page. [This is due to the nature of the solution itself. Any such attempt leads to error].

All I want is: the function defined in the .js file in the div's addEventListener should be a function in my .aspx itself, so that when the div is clicked in the page, it looks for the function in the page and run it.

Is this possible? Or is there any other option to do this?


Thanks in advance.

[rnd me]

    function addEvent(a, b, c) { // (object, event name, function)
    return a.attachEvent ? 
        a.attachEvent("on" + b, c) : 
        (a.addEventListener ? 
            a.addEventListener(b, c, false) : 
            a["on" + b] = function (e) {e = e || window.event;c.call(a, e);}
            );
    }
 

[sangam56]

Hi,
Thanks for the reply. I tried to use this function in my js file this way:

div.addEventListener=addEvent(div,"click","appendS ignature()");

I suppose "appendSignature()" as a function in my .aspx page.

Here comes an error:

...Could not convert JavaScript argument...
a.addEventListener(b, c, false) :

I'm not quite sure if I am calling the function correctly. Could you give an example, please?

Thanks again.

[Dormilich]

well, two things. you shouldn't redefine the addEventListener method (what sense would have this) and you use addEvent like

addEvent(div,"click",appendSignature);

of course, appendSignature() has to be a valid JS function...

[Frinavale]

Sangam,

Is your <div> element an ASP.NET Panel?
If so you could just add the onclick to the Panel in your .NET code:

myPanel.Attributes.Add("onclick","appendSignature()")

Is your web application Ajax enabled?
If so then you have the .NET Ajax framework at your finger tips and you could use the $addHandler method to specify which method should be called when the click event occurs:

  var myPanelOrDivID = "<%= myPanel.ClientID %>";
  $addHandler($get(myPanelOrDivID), 'click', appendSignature);

What are you trying to accomplish?

[sangam56]

Hi,
Thanks all for the answers.
I changed appendSignature() to appendSignature only, and it worked!

Further, with addEvent, I do use "onclick", whereas with addEventListener, I do use "click" only.

Thanks again!

[Dormilich]

@sangam56
anyways, there are different versions of addEvent() out there, so it depends on the version to use "onclick" or "click" (should be mentioned in the documentation)