How to acheive this ..

  • Thread starter sriram.nandakumar
  • Start date
S

sriram.nandakumar

Hi there..

I have this piece of code to basically understand the event model in
IE.

<html>
<head>
<title>Events</title>
<script>
function callMe(){
alert(this.nodeName)
};

function setEvents(){
document.attachEvent('onclick', callMe);
document.body.attachEvent('onclick', callMe);
var x = document.all;
if (x){
for(var i = 0; i<x.length; i++){
if (x.attachEvent){
x.attachEvent('onclick', callMe);
}
};
}
}
</script>
</head>
<body onload="setEvents()">
<h1>Events</h1>
<p > The IE event model is called Event bubbling which
prmarily works from most-specific to least-specific object</p>
<input type="button" value="click me"></input>
</body>
</html>

While a similar flavored code works works 'as intended' in Mozilla, in
IE the event callMe there are some subtle differences.

If you notice, in the method callMe I am trying to figure out which is
the node that triggered the onclick event. In Firefox I get the correct
node name whereas in IE (using 7.0 beta and checked the same in 6.0
also) I get 'undefined'.

The event object also offers no assistance to say which is the object
that is throwing up the event (or probably I am not aware of it). The
closest thing that I could find was event.srcElement which basically
points to the originating object only.

Given this my query is - When assigning methods dynamically, as events,
to a set of objects, is there any mechanism to find out which is the
object that is executing the method?

Thank you.
 
R

RobG

(e-mail address removed) said on 05/05/2006 3:42 PM AEST:
Hi there..

I have this piece of code to basically understand the event model in
IE.

<html>
<head>
<title>Events</title>
<script>
Click to expand...

Don't forget the required type attribute.

function callMe(){
alert(this.nodeName)
Click to expand...

When you use attachEvent in IE, -this- will refer to the window object,
not the element calling the function. Not all the elements you add a
handler to have a nodeName (because of the way you've used
document.all), try:

if (this && this.nodeName){
alert(this.nodeName);
}

};
Click to expand...

That semi-colon is redundant, it is treated as an empty statement.

function setEvents(){
document.attachEvent('onclick', callMe);
document.body.attachEvent('onclick', callMe);
var x = document.all;
if (x){
for(var i = 0; i<x.length; i++){
if (x.attachEvent){
x.attachEvent('onclick', callMe);
Click to expand...


If you want to use -this- and make it cross-browser, use:

x.onclick = callMe;

}
};
Click to expand...

That semi-colon is redundant, it is treated as an empty statement.

}
}
</script>
</head>
<body onload="setEvents()">
<h1>Events</h1>
<p > The IE event model is called Event bubbling which
prmarily works from most-specific to least-specific object</p>
<input type="button" value="click me"></input>
Click to expand...

HTML input elements don't have a closing tag, I think you're confusing
it with a button element.

</body>
</html>

While a similar flavored code works works 'as intended' in Mozilla, in
IE the event callMe there are some subtle differences.
Click to expand...

Not subtle, totally different in many respects :).

Read the events stuff at quirksmode:

If you notice, in the method callMe I am trying to figure out which is
the node that triggered the onclick event. In Firefox I get the correct
node name whereas in IE (using 7.0 beta and checked the same in 6.0
also) I get 'undefined'.
Click to expand...

IE's attachEvent is different (broken?), in your code -this- will refer
to the window object.

The event object also offers no assistance to say which is the object
that is throwing up the event (or probably I am not aware of it). The
closest thing that I could find was event.srcElement which basically
points to the originating object only.

Given this my query is - When assigning methods dynamically, as events,
to a set of objects, is there any mechanism to find out which is the
object that is executing the method?
Click to expand...

Don't use attachEvent, add the handler directly. If you need to add
multiple handlers, you'll have to use srcElement or some other strategy.
 
R

Richard Cornford

I have this piece of code to basically understand the event
model in IE.

<html>
<head>
<title>Events</title>
<script>
function callMe(){
alert(this.nodeName)
};

function setEvents(){
document.attachEvent('onclick', callMe);
document.body.attachEvent('onclick', callMe);
var x = document.all;
if (x){
for(var i = 0; i<x.length; i++){
if (x.attachEvent){
x.attachEvent('onclick', callMe);
}
};
}
}
</script>
Click to expand...

... . In Firefox I get the
correct node name whereas in IE (using 7.0 beta and checked
the same in 6.0 also) I get 'undefined'.
Click to expand...

The - attachEvent - mechanism in IE does not execute the functions
associated with the Element as methods of the element, so the - this -
keyword will always refer to the global object. The global object does
not have a - nodeName - property.

Given this my query is - When assigning methods dynamically,
as events, to a set of objects, is there any mechanism to
find out which is the object that is executing the method?
Click to expand...

Either assign a reference to the function to the - onclick - property of
the element:-

....
x[1].onclick = callMe;
....

- so that it will be executed as a method of the Element, or use a
closure[1] to associate the element with the a- function:-

function getOnclickReportFnc(element){
return (function(){
alert(element.nodeName);
]);
}

- with:-

....
x.attachEvent('onclick', getOnclickReportFnc(x));
....

Richard.

[1] <URL: http://jibbering.com/faq/faq_notes/closures.html > See
particularly the section on IE memory leaks in connection with this.
 
R

Richard Cornford

Richard Cornford wrote:
x[1].onclick = callMe;
...

- so that it will be executed as a method of the Element, or
use a closure[1] to associate the element with a - function:-

function getOnclickReportFnc(element){
return (function(){
alert(element.nodeName);
]);
Click to expand...
^
That should be a closing brace (- } -) not a closing square bracket.

Richard.
}
Click to expand...
<snip>

Richard.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

What "might" I be doing wrong with this snippet? 6
Script stops working when using variables to save time typing... 4
Making sure this javascript code works 1
How do I output this recursive function correctly to a web browser? 2
How to get event.target.id ? 3
How can I add arrows to my FAQ 0
Is there a way to pass this state from component to the fetch? 1
I dont get this. Please help me!! 2

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 327

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,021
Latest member
AkilahJaim

Latest Threads

Top