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

[J]

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);
}

}

 

[Peter Michaux]

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]

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?

 

[RobG]

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);
">

 

[J]

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]

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