Attaching events to dynamically created elements

[shuchow]

Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. Say I have a function,
dynamicallyCrea teElement(), that creates an element. I want that new
element to have an onclick that calls another function. So it looks
like this:

function dynamicallyCrea teElement() {
....
element.onclick = myFunction;

....
}

function myFunction() {
...

};

The problem is that myFunction will be called during the execution of
dynamicallyCrea teElement(), and not just the onclick for the element.

Instead, I have tod o this:
function dynamicallyCrea teElement() {
....
element.onclick = function() { myFunctions())_ ;;

....
}

Why does the first one automatically execute myFunction, and what
exactly does
element.onclick = function() do?

[SAM]

sh*****@gmail.c om a écrit :

Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. Say I have a function,
dynamicallyCrea teElement(), that creates an element. I want that new
element to have an onclick that calls another function. So it looks
like this:

function dynamicallyCrea teElement() {
...
element.onclick = myFunction;

here you tell to execute the function

element.onclick = 'myFunction()'; // could work

}

function myFunction() {
};

The problem is that myFunction will be called during the execution of
dynamicallyCrea teElement(), and not just the onclick for the element.

Instead, I have tod o this:
function dynamicallyCrea teElement() {
...
element.onclick = function() { myFunctions())_ ;;

not exactly (see below)

}

Why does the first one automatically execute myFunction,

because that works like that
as it does if you do

window.onload = alarm;

function alarm() { alert('OK'); }

and what exactly does
element.onclick = function() do?

The last one, you assign an annonymous function that will call anothrer
one on element's event 'click'

element.onclick = function() { myFunction(); };

element.onclick = 'myFunction();' ;

is same as

<tag onclick="myFunc tion();">
myFunction() would have to be declared outside of the function
dynamicallyCrea teElement

--
sm

[Gregor Kofler]

SAM meinte:

sh*****@gmail.c om a écrit :

>Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. Say I have a function,
dynamicallyCre ateElement(), that creates an element. I want that new
element to have an onclick that calls another function. So it looks
like this:

function dynamicallyCrea teElement() {
...
element.onclic k = myFunction;

here you tell to execute the function

Err... What? A reference to a function is assigned to the onclick
property - nothing gets executed. element.onclick () would call the
function, or element.onclick = myFunction(); would assign the result of
myFunction to the onclick property.

element.onclick = 'myFunction()'; // could work

Yuck! And I doubt it "works" cross-browser.

>}

function myFunction() {
};

The problem is that myFunction will be called during the execution of
dynamicallyCre ateElement(), and not just the onclick for the element.

I doubt that. Could you provide a test case?

>Instead, I have tod o this:
function dynamicallyCrea teElement() {
...
element.onclic k = function() { myFunctions())_ ;;

Wrap your function into another anonymous function I suppose - the
result should be the same. However, your "{ myFunctions())_ ;;" will only
result in a syntax error.

>Why does the first one automatically execute myFunction,

because that works like that
as it does if you do

window.onload = alarm;

This executes alarm when the load event fires. Not when you assign the
function, which seems to be the "problem" of the OP. I suppose he only
forgot some parantheses.

element.onclick = 'myFunction();' ;

is same as

<tag onclick="myFunc tion();">

No.

myFunction() would have to be declared outside of the function
dynamicallyCrea teElement

No.

Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

[C. (http://symcbean.blogspot.com/)]

On Jul 24, 5:35*pm, shuc...@gmail.c om wrote:

Hi, sorry for the basic question, but can someone explain to me some
basic event attachment process. *Say I have a function,
dynamicallyCrea teElement(), that creates an element. *I want that new
element to have an onclick that calls another function. *So it looks
like this:

function dynamicallyCrea teElement() {
...
element.onclick = myFunction;

...

}

function myFunction() {
..

};

The problem is that myFunction will be called during the execution of
dynamicallyCrea teElement(), and not just the onclick for the element.

No it won't; you're confusing

element.onclick = myFunction;

and element.onclick = myFunction();

C.

[shuchow]

On Jul 24, 6:10*pm, "C. (http://symcbean.blogsp ot.com/)"
<colin.mckin... @gmail.comwrote :
ot just the onclick for the element.

>
No it won't; you're confusing

element.onclick = myFunction;

and element.onclick = myFunction();

C.

I think I meant element.onclick = myFunction(this ); in my original
code, which definitely does execute myFunction().

After reading Peter-Paul Koch's page about the "this" keyword (http://
www.quirksmode.org/js/this.html) I got a much better understanding of
what I needed to do. I needed handler functions that would work for
both adding events using .onclick and inline.

Inline is handled by <span onclick="editHa ndler(this)"and
element.onclick = editHandler; handles adding the event in the table
row creation function. Inside editHandler, "this" is references the
span that I'm clicking on, which is what I really needed in the first
place. Thanks for all the responses.