Attaching events to dynamically created elements

Discussion in 'Javascript' started by shuchow@gmail.com, Jul 24, 2008.

  1. Guest

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

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

    ....
    }

    function myFunction() {
    ...

    };

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

    Instead, I have tod o this:


    function dynamicallyCreateElement() {
    ....
    element.onclick = function() { myFunctions())_;;

    ....
    }

    Why does the first one automatically execute myFunction, and what
    exactly does
    element.onclick = function() do?
     
    , Jul 24, 2008
    #1
    1. Advertising

  2. SAM Guest

    a écrit :
    > Hi, sorry for the basic question, but can someone explain to me some
    > basic event attachment process. Say I have a function,
    > dynamicallyCreateElement(), that creates an element. I want that new
    > element to have an onclick that calls another function. So it looks
    > like this:
    >
    > function dynamicallyCreateElement() {
    > ...
    > 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
    > dynamicallyCreateElement(), and not just the onclick for the element.
    >
    > Instead, I have tod o this:
    >
    >
    > function dynamicallyCreateElement() {
    > ...
    > 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="myFunction();">


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

    --
    sm
     
    SAM, Jul 24, 2008
    #2
    1. Advertising

  3. SAM meinte:
    > a écrit :
    >> Hi, sorry for the basic question, but can someone explain to me some
    >> basic event attachment process. Say I have a function,
    >> dynamicallyCreateElement(), that creates an element. I want that new
    >> element to have an onclick that calls another function. So it looks
    >> like this:
    >>
    >> function dynamicallyCreateElement() {
    >> ...
    >> element.onclick = 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
    >> dynamicallyCreateElement(), and not just the onclick for the element.


    I doubt that. Could you provide a test case?

    >> Instead, I have tod o this:
    >>
    >>
    >> function dynamicallyCreateElement() {
    >> ...
    >> element.onclick = 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="myFunction();">


    No.

    > myFunction() would have to be declared outside of the function
    > dynamicallyCreateElement


    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
     
    Gregor Kofler, Jul 24, 2008
    #3
  4. On Jul 24, 5:35 pm, wrote:
    > Hi, sorry for the basic question, but can someone explain to me some
    > basic event attachment process.  Say I have a function,
    > dynamicallyCreateElement(), that creates an element.  I want that new
    > element to have an onclick that calls another function.  So it looks
    > like this:
    >
    > function dynamicallyCreateElement() {
    > ...
    > element.onclick = myFunction;
    >
    > ...
    >
    > }
    >
    > function myFunction() {
    > ..
    >
    > };
    >
    > The problem is that myFunction will be called during the execution of
    > dynamicallyCreateElement(), and not just the onclick for the element.
    >


    No it won't; you're confusing

    element.onclick = myFunction;

    and element.onclick = myFunction();

    C.
     
    C. (http://symcbean.blogspot.com/), Jul 24, 2008
    #4
  5. Guest

    On Jul 24, 6:10 pm, "C. (http://symcbean.blogspot.com/)"
    <> wrote:
    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="editHandler(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.
     
    , Jul 25, 2008
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?V2ViTWF0cml4?=
    Replies:
    6
    Views:
    403
    =?Utf-8?B?V2ViTWF0cml4?=
    Dec 7, 2004
  2. odelya
    Replies:
    0
    Views:
    260
    odelya
    May 8, 2007
  3. msimmons
    Replies:
    0
    Views:
    494
    msimmons
    Jul 16, 2009
  4. Csaba2000

    attaching a method to DOM elements

    Csaba2000, Mar 7, 2005, in forum: Javascript
    Replies:
    2
    Views:
    95
    Michael Winter
    Mar 7, 2005
  5. Replies:
    4
    Views:
    96
Loading...

Share This Page