Problem with dynamically adding event handlers in IE - setAttribute and attachEvent

Discussion in 'Javascript' started by J, Nov 19, 2006.

  1. J

    J Guest

    I am having problems dynamically adding more than one event handler to
    an input. I have tried the Javascript included at the bottom. The
    lines

    inp.attachEvent('onkeyup', makeEventFunc1(strand));
    inp.attachEvent('onchange', makeEventFunc2(strand));
    individually work in IE, but when used together, only the bottom one
    remains active.

    I have also tried
    inp.onchange = new Function("nameclick(" + strand + ");");
    inp.onkeyup = new Function("namechange(" + strand + ");");

    but the code has problems in IE6. If I include one of the lines, it
    will work in IE6. If I include both lines, neither event handler
    works. All of the code works fine in Mozilla. Is there another way to
    dynamically add two event handlers to a control that will work in IE?

    Please help.

    -Jason



    function addNameRow(strand)
    {
    var tbody = document.getElementById("S" + strand +
    "Names").getElementsByTagName("TBODY")[0];
    var numnames = document.getElementById("S" + strand +
    "NumNames");
    numnames.value = parseInt(numnames.value)+ 1;

    var row = document.createElement("TR");

    td = document.createElement("TD");
    td.className = 'sitetext';
    td.innerHTML = "Enter Name #" + numnames.value + " for this
    Strand (Optional)";
    row.appendChild(td);

    var n = "S" + strand + "Name" + numnames.value;
    td1 = document.createElement("TD");
    td1.id = "S" + strand + "NameRow" + numnames.value;
    var inp = document.createElement("INPUT");

    inp.size = 16;
    inp.name=n;
    inp.id=n;

    if(inp.attachEvent)
    {
    //Do IE Specific
    inp.attachEvent('onkeyup', makeEventFunc1(strand));
    inp.attachEvent('onchange', makeEventFunc2(strand));
    }
    else
    {
    inp.onchange = new Function("nameclick(" + strand + ");");
    inp.onkeyup = new Function("namechange(" + strand + ");");
    }

    td1.appendChild(inp);
    row.appendChild(td1);

    tbody.appendChild(row);

    }

    function makeEventFunc1( param1 )
    {
    return function()
    {
    nameclick(param1);
    }

    }

    function makeEventFunc2( param1 )
    {
    return function()
    {
    namechange(param1);
    }

    }
     
    J, Nov 19, 2006
    #1
    1. Advertising

  2. Re: Problem with dynamically adding event handlers in IE - setAttribute and attachEvent

    J wrote:
    > I am having problems dynamically adding more than one event handler to
    > an input. I have tried the Javascript included at the bottom. The
    > lines
    >
    > inp.attachEvent('onkeyup', makeEventFunc1(strand));


    makeEventFunc1(strand) is a function invocation because of the parens
    after the function name. The second argument to attachEvent is a
    function to be used as the event handler not a function invocation.
    When the event handler makeEventFunc1 is called automatically by IE at
    the appropriate time, the event handler function will be passed one
    argument: the event object.

    If you want to pass an argument to the event handler you can use a
    closure. I'm not sure what you are doing exactly but something like
    this would pass the string "foo" to makeEventFunc1.

    strand = "foo";
    inp.attachEvent('onkeyup', function(event){makeEventFunc1(strand);});

    Peter
     
    Peter Michaux, Nov 19, 2006
    #2
    1. Advertising

  3. J

    J Guest

    Re: Problem with dynamically adding event handlers in IE - setAttribute and attachEvent

    The method you suggested is correct, but still doesn't solve my
    problem. If I put the following lines to attach the two events:

    inp.attachEvent('onchange',
    function(event){nameclick(strand);});
    inp.attachEvent('onkeyup',
    function(event){namechange(strand);});

    Only the onkeyup event is active (If I put the "onchange" event
    second, it will be active.) I can't get both to be active at the same
    time using these calls for IE6. Again, mozilla works fine with the
    same code. It's as though the IE model only has room to attach one
    event. Anyone else seen this issue?





    Peter Michaux wrote:
    > J wrote:
    > > I am having problems dynamically adding more than one event handler to
    > > an input. I have tried the Javascript included at the bottom. The
    > > lines
    > >
    > > inp.attachEvent('onkeyup', makeEventFunc1(strand));

    >
    > makeEventFunc1(strand) is a function invocation because of the parens
    > after the function name. The second argument to attachEvent is a
    > function to be used as the event handler not a function invocation.
    > When the event handler makeEventFunc1 is called automatically by IE at
    > the appropriate time, the event handler function will be passed one
    > argument: the event object.
    >
    > If you want to pass an argument to the event handler you can use a
    > closure. I'm not sure what you are doing exactly but something like
    > this would pass the string "foo" to makeEventFunc1.
    >
    > strand = "foo";
    > inp.attachEvent('onkeyup', function(event){makeEventFunc1(strand);});
    >
    > Peter
     
    J, Nov 20, 2006
    #3
  4. J

    RobG Guest

    Re: Problem with dynamically adding event handlers in IE - setAttribute and attachEvent

    J wrote:
    > The method you suggested is correct, but still doesn't solve my


    Please don't top post, reply below trimmed quotes.


    > problem. If I put the following lines to attach the two events:
    >
    > inp.attachEvent('onchange',
    > function(event){nameclick(strand);});
    > inp.attachEvent('onkeyup',
    > function(event){namechange(strand);});
    >
    > Only the onkeyup event is active (If I put the "onchange" event
    > second, it will be active.) I can't get both to be active at the same
    > time using these calls for IE6. Again, mozilla works fine with the
    > same code. It's as though the IE model only has room to attach one
    > event. Anyone else seen this issue?


    Remove the "IE specific" code completely, it does nothing useful. Use
    attachEvent and addEventListener only if you want to add multiple
    handlers for the same event. It is much more reliable to use your "non
    IE" method:

    element.eventName = functionName /or/ functionExpression;

    Your issue is likely in regard to a conflict between onchange and
    onkeyup. The following example may help - note that in IE you need to
    click outside the input to make the onchange handler fire, whereas in
    Firefox, the onchange alert causes the input to lose focus and hence
    onchange to fire.

    <script type="text/javascript">

    // Single handler method
    function addEvent0(el, evt, fn){
    el['on'+evt] = fn;
    }

    // Multiple handler method
    function addEvent1(el, evt, fn, capture){
    if (el.addEventListener){
    el.addEventListener(evt, fn, capture);
    } else if (el.attachEvent){
    el.attachEvent('on'+evt, fn);
    }
    }

    function nameClick(){alert('nameClick');}

    function nameChange(){alert('nameChange');}

    </script>

    <input type="text" id="inp0">
    <input type="button" value="addEvent0" onclick="
    var el = document.getElementById('inp0');
    addEvent0(el, 'keyup', nameClick);
    addEvent0(el, 'change', nameChange);
    ">
    <input type="button" value="addEvent1" onclick="
    var el = document.getElementById('inp0');
    addEvent1(el, 'keyup', nameClick, false);
    addEvent1(el, 'change', nameChange, false);
    ">


    --
    Rob
     
    RobG, Nov 20, 2006
    #4
  5. J

    J Guest

    Re: Problem with dynamically adding event handlers in IE - setAttribute and attachEvent

    Slight correction to the previous post. If the line with "onkeyup" is
    present, that event is active and works fine. while the "onchange"
    doesnt fire regardless of the order the lines are writtern. If the
    "onchange" line is alone, it works fine. The same is true if
    following syntax is used:

    inp.onkeyup = new Function("namechange(" + strand + ");");
    inp.onchange = new Function("nameclick(" + strand + ");");


    J wrote:
    > The method you suggested is correct, but still doesn't solve my
    > problem. If I put the following lines to attach the two events:
    >
    > inp.attachEvent('onchange',
    > function(event){nameclick(strand);});
    > inp.attachEvent('onkeyup',
    > function(event){namechange(strand);});
    >
    > Only the onkeyup event is active (If I put the "onchange" event
    > second, it will be active.) I can't get both to be active at the same
    > time using these calls for IE6. Again, mozilla works fine with the
    > same code. It's as though the IE model only has room to attach one
    > event. Anyone else seen this issue?
    >
    >
    >
    >
    >
    > Peter Michaux wrote:
    > > J wrote:
    > > > I am having problems dynamically adding more than one event handler to
    > > > an input. I have tried the Javascript included at the bottom. The
    > > > lines
    > > >
    > > > inp.attachEvent('onkeyup', makeEventFunc1(strand));

    > >
    > > makeEventFunc1(strand) is a function invocation because of the parens
    > > after the function name. The second argument to attachEvent is a
    > > function to be used as the event handler not a function invocation.
    > > When the event handler makeEventFunc1 is called automatically by IE at
    > > the appropriate time, the event handler function will be passed one
    > > argument: the event object.
    > >
    > > If you want to pass an argument to the event handler you can use a
    > > closure. I'm not sure what you are doing exactly but something like
    > > this would pass the string "foo" to makeEventFunc1.
    > >
    > > strand = "foo";
    > > inp.attachEvent('onkeyup', function(event){makeEventFunc1(strand);});
    > >
    > > Peter
     
    J, Nov 20, 2006
    #5
  6. J

    J Guest

    Re: Problem with dynamically adding event handlers in IE - setAttribute and attachEvent

    I solved the problem by changing "onchange" to "onblur".

    J wrote:
    > Slight correction to the previous post. If the line with "onkeyup" is
    > present, that event is active and works fine. while the "onchange"
    > doesnt fire regardless of the order the lines are writtern. If the
    > "onchange" line is alone, it works fine. The same is true if
    > following syntax is used:
    >
    > inp.onkeyup = new Function("namechange(" + strand + ");");
    > inp.onchange = new Function("nameclick(" + strand + ");");
    >
    >
    > J wrote:
    > > The method you suggested is correct, but still doesn't solve my
    > > problem. If I put the following lines to attach the two events:
    > >
    > > inp.attachEvent('onchange',
    > > function(event){nameclick(strand);});
    > > inp.attachEvent('onkeyup',
    > > function(event){namechange(strand);});
    > >
    > > Only the onkeyup event is active (If I put the "onchange" event
    > > second, it will be active.) I can't get both to be active at the same
    > > time using these calls for IE6. Again, mozilla works fine with the
    > > same code. It's as though the IE model only has room to attach one
    > > event. Anyone else seen this issue?
    > >
    > >
    > >
    > >
    > >
    > > Peter Michaux wrote:
    > > > J wrote:
    > > > > I am having problems dynamically adding more than one event handler to
    > > > > an input. I have tried the Javascript included at the bottom. The
    > > > > lines
    > > > >
    > > > > inp.attachEvent('onkeyup', makeEventFunc1(strand));
    > > >
    > > > makeEventFunc1(strand) is a function invocation because of the parens
    > > > after the function name. The second argument to attachEvent is a
    > > > function to be used as the event handler not a function invocation.
    > > > When the event handler makeEventFunc1 is called automatically by IE at
    > > > the appropriate time, the event handler function will be passed one
    > > > argument: the event object.
    > > >
    > > > If you want to pass an argument to the event handler you can use a
    > > > closure. I'm not sure what you are doing exactly but something like
    > > > this would pass the string "foo" to makeEventFunc1.
    > > >
    > > > strand = "foo";
    > > > inp.attachEvent('onkeyup', function(event){makeEventFunc1(strand);});
    > > >
    > > > Peter
     
    J, Nov 20, 2006
    #6
    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. Matt
    Replies:
    7
    Views:
    14,870
    John C. Bollinger
    Nov 8, 2004
  2. jiayanxiang
    Replies:
    2
    Views:
    112
    jiayanxiang
    Apr 11, 2006
  3. wolverine
    Replies:
    0
    Views:
    124
    wolverine
    Sep 27, 2007
  4. wolverine
    Replies:
    3
    Views:
    128
    wolverine
    Sep 28, 2007
  5. webgour
    Replies:
    4
    Views:
    139
Loading...

Share This Page