this vs event.scrElemen t

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="cliccabi le">clicca qui 0</td>
<td id="b" class="cliccabi le"><span id="d" class="testo">c licca 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 Reply

3262

fusillo

Here's a possible solution for my problem:

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

function fun(evt){
if (evt.srcElement &&
evt.srcElement. className.index Of("cliccabile" )>-1) //microsoft IE
window.alert("e vt.srcElement "+evt.srcElemen t.id);
else if (this.className && this.className. indexOf("clicca bile")>-1)
//browser standard
window.alert("t his "+this.id);
document.write( dump_props(this ,"this")+dump_p rops(evt.srcEle ment,"evt.srcEl ement"));
}

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("t his "+this.id);
else if (evt.srcElement .className=="cl iccabile") //microsoft IE
window.alert("e vt.srcElement "+evt.srcElemen t.id);
document.write( dump_props(this ,"this")+dump_p rops(evt.srcEle ment,"evt.srcEl ement"));
}

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

var a, b;

if (document.getEl ementById
&& (a = document.getEle mentById('a'))
&& (b = document.getEle mentById('b'))) {
if (a.addEventList ener) {
/* ... */
} else if (a.attachEvent) {
/* ... */
}
}
document.getEle mentById("a").a ddEventListener ('click',fun,fa lse);
document.getEle mentById("b").a ddEventListener ('click',fun,fa lse);
}else if (document.getEl ementById("a"). attachEvent){ //microsoft IE
document.getEle mentById("a").a ttachEvent('onc lick',fun);
document.getEle mentById("b").a ttachEvent('onc lick',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.addEventList ener) {
/* ... */
} 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.classNa me == 'cliccabile') {
alert('Target: ' + target.id);
}
document.write( dump_props(this , 'this')
+ dump_props(targ et, '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.getEle mentById("b").a ttachEvent('onc lick',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.addEventL istener) {
elem.addEventLi stener(eventTyp e, handler, false);
} else if (elem.attachEve nt) {
elem.attachEven t("on"+eventtyp e, function(evt){
return handler.call(el em,evt)});
} else { // or whatever fallback
elem["on"+eventt ype] = handler;
}
}
and then:

addEventHandler (document.getEl ementById("a"), "click", fun);
addEventHandler (document.getEl ementById("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/rasterTriangleD OM.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.dt d">
<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{backgr ound-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(o bj,strtype,list ener,usecapture ){
if (obj.addEventLi stener)
obj.addEventLis tener(strtype,l istener,usecapt ure);
else if (obj.attachEven t){
obj.attachEvent ('on'+strtype,f unction myCall(evt){ window.alert('I
view myCall function'); listener.call(o bj,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 myRemoveListene r */
function myAddListener(o bj,strtype,list ener,usecapture ) {
if (obj.addEventLi stener) {
obj.addEventLis tener(strtype,l istener,usecapt ure);
return listener;
} else if (obj.attachEven t) {
var myCall = function myCall(evt){
window.alert('I view myCall function');
listener.call(o bj,evt);
};
obj.attachEvent ('on'+strtype,m yCall);
return myCall;
}
}

and then myRemoveListene r should work if you pass it the return value
of myAddListeren, and not the original function.
function myRemoveListene r(obj,strtype,l istener,usecapt ure){
if (obj.removeEven tListener)
obj.removeEvent Listener(strtyp e,listener,usec apture);
else if (obj.detachEven t){
obj.detachEvent ("on"+strtype,l istener); // 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/rasterTriangleD OM.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.dt d">
<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{backgr ound-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*********@we b.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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

May 27 '06 #8

Thomas 'PointedEars' Lahn

Lasse Reichstein Nielsen wrote:

Thomas 'PointedEars' Lahn <Po*********@we b.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(wi ndow.a);

So why not adding property to a table object?

May 28 '06 #10

Similar topics

49570

Passing parameters to event handler

by: Pavils Jurjans | last post by:

Hallo, I have been programming for restricted environments where Internet Explorer is a standard, so I haven't stumbled upon this problem until now, when I need to write a DOM-compatible code. The question is about best practices for passing parameters to an event function. I have, say, the following HTML:

Javascript

12567

dynamically assign event to element

by: Eric | last post by:

How can I dynamically assign an event to an element? I have tried : (myelement is a text input) document.getElementById('myelement').onKeyUp = "myfnc(param1,param2,param3)"; document.getElementById('myelement') = new Function("myfnc(param1,param2,param3)");

Javascript

2115

Netscape 7.1 - why is event.preventDefault undefined

by: Mike | last post by:

I have a textbox where I'm trying to restrict which keys a user can hit. My syntax is onKeyDown="myFunction(event)" To restrict the keys, Netscape requires the event.preventDefault method. Problem is, I'm getting and "undefined" for that method. The event object is ok as I'm able to get event.keyCode fine, but nothing for preventDefault. I've even tried something as simple as onKeyDown="alert(event.preventDefault())", but still get...

Javascript

13916

ondrag event equivalent for mozilla

by: David | last post by:

Is there something that I can use to prevent the a user from dragging something, an image for instance. In IE I can use the ondrag = "return false;", is there a way to achieve the same way with the other browsers? Thanks, David

Javascript

4234

DB2 8.01 - need help with deadlock problem (Event Monitor Log Attached)

by: Rohit Raghuwanshi | last post by:

Hello all, we are running a delphi application with DB2 V8.01 which is causing deadlocks when rows are being inserted into a table. Attaching the Event Monitor Log (DEADLOCKS WITH DETAILS) here. From the log it looks like the problem happens when 2 threads insert 1 record each in the same table and then try to aquire a NS (Next Key Share) lock on the record inserterd by the other thread. Thanks Rohit

DB2 Database

1787

event firing

by: Paul | last post by:

Hi, In a class i built, i fire an event when a field changes. In a webform that has an instance of the class, the event (from the class) is fired and the code is executed. However, my webpage does not reload (postback) after the event fires. How do i get the webform to postback when the event fires (after the code in the event is done executing)? Thank you, Paul

ASP.NET

10188

Disable TR onclick event

by: dan_williams | last post by:

I have the following test web page:- <html> <head><title>Test</title> <script language="Javascript"> <!-- function fnTR() { alert("TR"); }

Javascript

5131

Managed OnSave Event Sink Errors on x64

by: Don | last post by:

Getting errors after following the MSDN article on using VB.NET (and VS2005) for "Implementing a Managed OnSave Event Sink" for Exchange Server 2007. Not sure, but part of the problem may be that it's the 64-bit version of Exchange 2007 installed on Windows Server 2003 Enterprise x64, while the Exchange 2007 SDK samples seem mostly geared toward 32-bit. Even at that, I was able to build the TLB and install it into COM+ Component Services,...

Visual Basic .NET

2296

Event Queues

by: nt5515 | last post by:

im trying to write a program that store a binary tree of possible events in an array. i need to be able to sort the the Events in the array based on the previous event that caused it by the time which they will occur. After the specific time has passed the event will be removed and all other events will be bumped up, all the while new events will be added to the end and sorted by their time. Please Help heres wot i've got so far, i've got...

Java

8275

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8795

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8695

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8460

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8576

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6157

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4143

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4281

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1585

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General