this vs event.scrElement

fusillo

Hi, i've tried a test code about the Event Listener API but i've some
problem about detaching the element firing the event with IE. Here's my
code:

<html>
<head>
<style type="text/css">
..cliccabile {background-color: #FFCCCC; cursor:pointer;}
..testo {color: #009966;}
</style>
</head>
<body>
<div id="tabella">
<table id="DOMtable">
<tr>
<td id="a" class="cliccabile">clicca qui 0</td>
<td id="b" class="cliccabile"><span id="d" class="testo">clicca qui
1</span></td>
</tr>
</table>
</div>
<script type="text/javascript">

</script>
</body>
</html>

When I click the element with id=b using IE it dumps the window object
by this and the span object by evt.srcElement.
Do you know an alternative to this in that case?

Thanks

fusillo

May 26 '06 #1

Subscribe Post Reply

3229

fusillo

Here's a possible solution for my problem:

<td id="b" class="testo cliccabile">clicca qui 1</td>

function fun(evt){
if (evt.srcElement &&
evt.srcElement.className.indexOf("cliccabile")>-1) //microsoft IE
window.alert("evt.srcElement "+evt.srcElement.id);
else if (this.className && this.className.indexOf("cliccabile")>-1)
//browser standard
window.alert("this "+this.id);
document.write(dump_props(this,"this")+dump_props( evt.srcElement,"evt.srcElement"));
}

May 26 '06 #2

Michael Winter

On 26/05/2006 02:56, fusillo wrote:

[snip]

Whilst I realise that what you posted is just an example, there are some
issues with the markup, of which you may not be aware.

<html>
HTML documents should have a document type declaration (DOCTYPE), which
nowadays should be Strict.
<head>
<style type="text/css">
.cliccabile {background-color: #FFCCCC; cursor:pointer;}
.testo {color: #009966;}
When specifying a foreground colour, a background colour should usually
be paired with it (and vice versa). Furthermore, once you set one colour
combination, you should set them all (such as link colours)[1].

It is definitely a mistake to assume that anyone is using the same
default colours as you. Consider a visitor with a desktop theme that is
light-on-dark (as opposed to the usual dark-on-light). If you set a pale
background, overriding their default dark one, but assume that their
foreground colour will be black, which it isn't, you will have just
rendered the document unreadable.

[snip]
<div id="tabella">
This div element would seem to be unnecessary...
<table id="DOMtable">
....and a table element with only one row (or one column) is always
suspect. A table should be used to contain tabular data, nothing more.

[snip]
<script type="text/javascript">
<!--
'Hiding' the contents of script elements has been unnecessary for years.

[snip]
result += "<hr />";
You aren't writing XHTML, so don't use its syntax: <hr> not <hr/>. The
same applies to the line break.

[snip]
function fun(evt){
if (this.className=="cliccabile") //browser standard
window.alert("this "+this.id);
else if (evt.srcElement.className=="cliccabile") //microsoft IE
window.alert("evt.srcElement "+evt.srcElement.id);
document.write(dump_props(this,"this")+dump_props( evt.srcElement,"evt.srcElement"));
}

if (document.getElementById("a").addEventListener){ //browser standard
You should use feature detection, rather than assuming that the
getElementById method is supported.

var a, b;

if (document.getElementById
&& (a = document.getElementById('a'))
&& (b = document.getElementById('b'))) {
if (a.addEventListener) {
/* ... */
} else if (a.attachEvent) {
/* ... */
}
}
document.getElementById("a").addEventListener('cli ck',fun,false);
document.getElementById("b").addEventListener('cli ck',fun,false);
}else if (document.getElementById("a").attachEvent){ //microsoft IE
document.getElementById("a").attachEvent('onclick' ,fun);
document.getElementById("b").attachEvent('onclick' ,fun);
}

The attachEvent method as currently implemented in IE is broken (in my
opinion). Rather than setting the this operator value to something
useful, namely the element to which the listener is attached, it refers
to the global object. In this instance, it would better to assign a
reference to the listener to the onclick property of the elements:

if (a.addEventListener) {
/* ... */
} else {
a.onclick = b.onclick
= fun;
}

[snip]

Now, whether you should be using the this operator or the target or
srcElement properties of the event object depends on what you're really
doing. The this operator will always refer to the element to which the
event listener is attached, whereas the target/srcElement property will
refer to the element that dispatched the event (the element that was
clicked). You'll have to choose which is the most appropriate. If you
choose the latter, the listener should be rewritten to something like:

function fun(e) {
var target;

if ((e = e || window.event)
&& (target = e.target || e.srcElement)) {
if (target.className == 'cliccabile') {
alert('Target: ' + target.id);
}
document.write(dump_props(this, 'this')
+ dump_props(target, 'Event target'));
}
}

Hope that helps,
Mike
Please refrain from using tabs when posting code to Usenet. Use a couple
of spaces, instead.

[1] If You Pick One Color, Pick Them All
<http://www.w3.org/QA/Tips/color>

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

May 26 '06 #3

Lasse Reichstein Nielsen

fusillo <fu*****@nospam.posi-nega.it> writes:

document.getElementById("b").attachEvent('onclick' ,fun);
....
When I click the element with id=b using IE it dumps the window object
by this and the span object by evt.srcElement.

The IE attachEvent method does not invoke the handler as a property of
the target element, which is why "this" refers to the global object.

You know the object at the time the handler is assigned, so you
should remember it there.

I would use a helper function like:

function addEventHandler(elem, eventtype, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventType, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent("on"+eventtype, function(evt){
return handler.call(elem,evt)});
} else { // or whatever fallback
elem["on"+eventtype] = handler;
}
}
and then:

addEventHandler(document.getElementById("a"), "click", fun);
addEventHandler(document.getElementById("b"), "click", fun);

This would ensure that the "this" property refers to the correct
object when the handler is executed.

You should also be aware that "srcElement" is a proprietary IE property,
and the corresponding standard property is "target".
Inside the handler function, you could do:

var tgt = evt.target || evt.srcElement;

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

May 26 '06 #4

fusillo

I've tried to use the call method of Function object assigning this
explicitly, but i've some problem to detach the listener, actually i
don't find a solution in my new test code. Here's:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
..cliccabile {background-color: #FFCCCC; cursor:pointer;}
..cliccato {background-color: #FF6666;}
..festivo {color: #009966;}
#tabella{background-color:#FFFFFF;}
</style>
</head>
<body>
<div id="tabella"></div>
<script type="text/javascript">

</script>
</body>
</html>

I'm conscious about importance of getElementById feature detection, but
i don't care it in this test case.
Every advice to better my programmation style is really
well-appreciated. Thanks for your helps.
Sorry for the tab usage on my previous post.

fusillo

May 27 '06 #5

Lasse Reichstein Nielsen

fusillo <fu*****@nospam.posi-nega.it> writes:

I've tried to use the call method of Function object assigning this
explicitly, but i've some problem to detach the listener, .... function myAddListener(obj,strtype,listener,usecapture){
if (obj.addEventListener)
obj.addEventListener(strtype,listener,usecapture);
else if (obj.attachEvent){
obj.attachEvent('on'+strtype,function myCall(evt){ window.alert('I
view myCall function'); listener.call(obj,evt); });
This "function myCall" is a function expression. The "myCall" name is
only visible inside the body of the function.

If you need it later, and you do if you want to detach it, you will
have to store it until it needs to be detached. You could return it
for later use:

/** returns the actual listener to remove with myRemoveListener */
function myAddListener(obj,strtype,listener,usecapture) {
if (obj.addEventListener) {
obj.addEventListener(strtype,listener,usecapture);
return listener;
} else if (obj.attachEvent) {
var myCall = function myCall(evt){
window.alert('I view myCall function');
listener.call(obj,evt);
};
obj.attachEvent('on'+strtype,myCall);
return myCall;
}
}

and then myRemoveListener should work if you pass it the return value
of myAddListeren, and not the original function.
function myRemoveListener(obj,strtype,listener,usecapture){
if (obj.removeEventListener)
obj.removeEventListener(strtype,listener,usecaptur e);
else if (obj.detachEvent){
obj.detachEvent("on"+strtype,listener); // returned listener,
//not original

myCall(null);

There was no myCall in scope

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

May 27 '06 #6

Thomas 'PointedEars' Lahn

fusillo wrote:

I've tried to use the call method of Function object assigning this
explicitly, but i've some problem to detach the listener, actually i
don't find a solution in my new test code. Here's:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
You should discard XHTML 1.0 Transitional in favor of HTML 4.01 Transitional
(or better: Strict) immediately. You do not need XHTML here at all, and it
only gets you into more trouble than you realize(d).
<head>
<style type="text/css">
This is not supposed to work in XHTML. It is an XML application, therefore
XML stylesheet rules apply. In XML, the stylesheet to be used to render a
document must be defined via an <?xml-stylesheet ... ?> processing
instruction (PI) before the DOCTYPE declaration. This can be facilitated
with

<?xml-stylesheet href="#foo" type="text/css"?>
<!DOCTYPE ...>
<html ...>
<head ...>
...
<style type="text/css" id="foo">
...
</style>
...
</head>

...
</html>

But it is recommended that you refer to an external stylesheet resource
instead (because there is also the PCDATA issue, see below):

<URL:http://www.w3.org/TR/xhtml1/#C_13>

It "works" anyway because you serve XHTML as text/html, instead of the
recommended media type application/xhtml+xml. This will have UAs with
tag soup parsers to parse XHTML as if it were wrongfully error-corrected
HTML. Search the archives.

<URL:http://hixie.ch/advocacy/xhtml>
.cliccabile {background-color: #FFCCCC; cursor:pointer;}
.cliccato {background-color: #FF6666;}
.festivo {color: #009966;}
#tabella{background-color:#FFFFFF;}
Use Web-safe triplets (#fcc, #f66, #096, #fff), and take heed of
<URL:http://www.w3.org/QA/Tips/color>.
</style>
</head>
<body>
<div id="tabella"></div>
If this was parsed by an XML parser, you could write it as

<div id="tabella"/>

(If this does not work, it is a proof that an XML parser is _not_ used.)
<script type="text/javascript">
Correct.

</script>
</body>
</html>

I'm conscious about importance of getElementById feature detection, but
i don't care it in this test case.
Your problem. You should always care.
Every advice to better my programmation style is really
well-appreciated.
[x] done
Thanks for your helps.

You are welcome.
PointedEars
--
http://members.ud.com/download/gold/
http://folding.stanford.edu/
http://alien.de/seti/
http://setiathome.ssl.berkeley.edu/

May 27 '06 #7

Lasse Reichstein Nielsen

Thomas 'PointedEars' Lahn <Po*********@web.de> writes:

fusillo wrote:

<style type="text/css">

This is not supposed to work in XHTML.

XHTML 1.0 Transitional inherits the style element from HTML 4.01.
It should work, as long as the contents are valid PCDATA
<URL:http://www.w3.org/TR/xhtml1/#h-4.8>
<URL:http://www.w3.org/TR/xhtml1/#C_4>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

May 27 '06 #8

Thomas 'PointedEars' Lahn

Lasse Reichstein Nielsen wrote:

Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
fusillo wrote:
<style type="text/css">

This is not supposed to work in XHTML.

XHTML 1.0 Transitional inherits the style element from HTML 4.01.
It should work, as long as the contents are valid PCDATA
<URL:http://www.w3.org/TR/xhtml1/#h-4.8>
<URL:http://www.w3.org/TR/xhtml1/#C_4>

Please read my comment in context. I am well aware of the fact that the
`style' element is declared in the XHTML 1.0 (Transitional) DTD(s) (and not
inherited from somewhere). However, for an XML renderer to take notice of
the style rules defined therein, it is required that it is referred to in
an XML-stylesheet PI.

On more thorough reading, you will also observe that I referred to
subsection 4.8 in my followup already, and that I mentioned the possibility
that subsection C.4 states. However, I also referred to subsections C.13
(and C.14) in my followup only a few lines below the text that you quoted
above; those parts of the specification explain in detail (again) that and
why the above is not supposed to work as is in XHTML (where the terms
"XHTML documents delivered as HTML" and "XHTML documents delivered as XML"
as used there, are highly questionable, as is the idea behind the entire
"HTML Compatibility Guidelines").
PointedEars
--
Set truthfulness above everything else.
When a man lies, he kills a part of the world.
-- Merlin (AFAIK)

May 27 '06 #9

fusillo

Thanks for your useful advises, but i have a dubt about this:

Thomas 'PointedEars' Lahn ha scritto:

You SHOULD NOT try to augment host objects in order to store user-defined
data; use native objects instead.

When i use a native object don't i augumt the window host object in a
web contest?

an example to explain what i itend:

a=new String('hello from italy');
window.alert(window.a);

So why not adding property to a table object?

May 28 '06 #10

Thomas 'PointedEars' Lahn

fusillo wrote:

Thomas 'PointedEars' Lahn ha scritto:
You SHOULD NOT try to augment host objects in order to store user-defined
data; use native objects instead.
When i use a native object don't i augumt the window host object in a
web contest?

Probably you mean _context_. No, you don't.
an example to explain what i itend:

a=new String('hello from italy');
That identifier should be declared a variable to avoid side effects, and
`new String' is just nonsense.

var a = 'hello from italy';
window.alert(window.a);
There is no point in posting this line without saying what the result is
for you. However, probably you observe the value of `a' to be displayed.

`window' would then be a host-defined property of the Global Object (as
that is the Variable Object in global context) that refers to its owner
(provided that there is not the known IE scope chain issue). This
possibility is mentioned already in subsection 10.1.5 of the ECMAScript
Specification, Edition 3 Final (and the corresponding subsection in
previous editions), and does not have anything to do with host objects
(cf. subsection 4.3.8).
So why not adding property to a table object?

Because it is a host object, and the ECMAScript Specification (Ed. 3 Final,
subsection 8.6.2) states that host objects do not need to implement the
property access methods [[Put]] and [[Get]] as specified there. Code that
makes use of host objects as data containers (without using their defined
properties) is therefore inherently error-prone.
PointedEars

May 28 '06 #11

this vs event.scrElement

Similar topics