Forum Moderators: open
row.attachEvent("onclick",rowdelete);
this is working fine. but,
when i pass aparameter like,
row.attachEvent("onclick",rowdelete(rowid));
it is throwing a script error: Type Mismatch.
Plz,guide me.
rowdeleterowdelete(rowid)Maybe use the 'classic' form of event assignment:
row.onclick = rowdelete;
Unlike with attachEvent, the keyword, this, will be available as a reference to the row.
function rowdelete()
{
alert(this.rowIndex)
}
-------
Personally, I think it probably better to use event bubbling for this, rather than attaching event handlers to individual rows.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div{height:150px;width:300px;}
#divOne{background:#dee;}
#divTwo{background:#eed;}
#divThree{background:#ede;}
</style>
<script type="text/javascript">
function testAtt(evt){
var e_out;
(typeof window.event!="undefined")? e_out=event.srcElement.id : e_out=evt.target.id;
alert(e_out);
}
window.onload=function(){
if(document.addEventListener){ //code for Moz
document.addEventListener('click',testAtt,false);
}else{
document.attachEvent('onclick',testAtt);
}
}
</script>
</head>
<body id="pgBod">
<div id="divOne"></div>
<div id="divTwo"></div>
<div id="divThree"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div{height:150px;width:300px;}
#divOne{background:#dee;}
#divTwo{background:#eed;}
#divThree{background:#ede;}
</style>
<script type="text/javascript">
function testAtt(evt){
var e_out;
// target for Moz - srcElement for IE
evt.target? e_out=evt.target.id : e_out=evt.srcElement.id;
alert(e_out);
}
window.onload=function(){
// addEventListener for Moz - attachEvent for IE
document.addEventListener?document.addEventListener('click',testAtt,false):document.attachEvent('onclick',testAtt);
}
</script>
</head>
<body id="pgBod">
<div id="divOne"></div>
<div id="divTwo"></div>
<div id="divThree"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div{height:150px;width:300px;}
#divOne{background:#dee;}
#divTwo{background:#eed;}
#divThree{background:#ede;}
</style>
<script type="text/javascript">
function testAtt(evt){
var e_out;
var ie_var="srcElement";
var moz_var="target";
var prop_var="id";
// target for Moz, et al. - srcElement for IE
evt[moz_var]? e_out=evt[moz_var][prop_var] : e_out=evt[ie_var][prop_var];
alert(e_out);
}
window.onload=function(){
// addEventListener for Moz, et al. - attachEvent for IE
document.addEventListener?document.addEventListener('click',testAtt,false):document.attachEvent('onclick',testAtt);
}
</script>
</head>
<body id="pgBod">
<div id="divOne"></div>
<div id="divTwo"></div>
<div id="divThree"></div>
</body>
</html>
Of course, this topic has a strong link back to Rambo's thread about onload collision avoidance a few days back. I was, at the time, going to suggest a function that wraps up the various event handler assignment methods
IE: attachEvent
W3C: addEventListener
legacy: "function reference as Javascript property"
Normalising the first two is easy enough (with limitations).
Implementing the third can involve things like continually encapsulating the previous assignment as a call in the newly added one. It is even possible to make sure that events are transmitted using this approach. I know because I had some such code working ..somewhere ..once.
The biggest spanner in the works, in my view, is attacheEvent. I can't see how it is possible for the called function to gain a reference to the originating object. This makes it practically useless for real OO designs.
There is a way, but it involves using a closure, and one which results in a nasty circular reference at that. It's probably useless in loops too.
Rambo's suggestion of using event.srcElement (etc) is good, and will work in 'simple' cases. That is to say, where the element that is assigned the handler contains no sub-elements...
<div>hello <b>you</b></div>
If we use this approach to assign an onclick handler to the DIV, it will fail if the B, or it's textNode, are clicked.
I stick with the 'legacy' approach, because I am at a loss as to what else to do.
Guidance requested.
Still, more work than with "legacy" techniques. Older is better (no, I'm not balding, I'm becoming more streamlined).
