Re: Dynamically assigning functions with parameters to events
- From: Thomas 'PointedEars' Lahn <PointedEars@xxxxxx>
- Date: Wed, 15 Aug 2007 13:45:51 +0200
Biguana wrote:
Thank you for taking the time to reply.
You're welcome.
After posting I had actually updated my code so setuplinks just passes
the event and the srcElement to a function passingfunc:
Why both? Event::target (DOM Level 2 Events) and Event::srcElement (MSHTML
DOM) exist.
atags[i].onmouseover=function(event){passingfunc(event,this);};
which in turn does the work at mouseover-time:
function passingfunc(e,caller)
{
e = e || window.event;
var x = caller.id.replace('gp','tip');
eventfunc(e,x);
}
This also takes care of ie managing the events differently and seems
to work fine in ie7, firefox and safari (for windows at least).
It is unnecessarily inefficient: You have to loop through all elements, to
test each element, to create a Function object (therefore allocate memory
for it) for each matching element, and to assign the event listener for the
`mouseover' event for each matching element. Worst Case scenario is that
you have one link in a huge HTML document with many other elements that the
cursor of the pointing device (if there is any) is never moved over, and all
this was for nothing.
It is unreliable: Provided that it even works (using `onmouseover' is a
proprietary approach that is not even partially endorsed by Web standards),
the user may hover over one link before you have been able to set the event
listener for it.
However it obviously still doesn't use your event bubbling model, but
your example seems to assign the event handler in the tag, which I was
informed was wrong? (sorry, I'm a bit of a newb).
You have been misinformed (through Danny Goodman's "JavaScript Bible" by any
chance?). `onmouseover' is an attribute of the `body' element in Valid HTML
4.01 Strict, XHTML 1.0 Strict, and XHTML (Basic) 1.1, and so may appear in
its start tag. [1] It is also the most compatible (incl. IE) and so far the
less maintenance-demanding approach.
I was hoping to just plug my JS into a page that contains the appropriate
classes and let it do all the work?
It does.
I really don't see the point in this.
Apologies for not explaining. It goes through the <a> tags and if it
finds one with the class 'groups-period' and (for example) id 'gp123'
it needs to call eventfunc(e,'tip123') (eventfunc shows a tooltip -
'tip123' is the id of the div for tooltip for the link with id gp123).
Why not simply use CSS directly instead?
If it is declared a *local* variable.
Surely that means declared in the function, as it is?
Yes.
In fact it's declared in the loop (not that it makes any difference
where it's declared, the result is the same).
Yes, because all interoperable ECMAScript implementations so far do not
support block scoping; all variable instantiation takes place before
execution. (JavaScript 1.7 implements block scoping now with the `let'
statement, but it is not an interoperable implementation as it is restricted
to UAs based on Gecko 1.8.1+.)
Using the alternative approach below should
make the problem to disappear already.
But it also means making each <a> tag as follows:
<a href='urlstuff' class='groups-period' id='gp123'
onmouseover='eventfunc(event)' >
It doesn't. I have never wrote about setting the `onmouseover' attribute
for every `a' element. In fact, not having to do that is what event
bubbling is all about.
and I've been informed (perhaps misinformed) that javascript should be
kept out of links.
You have been misinformed, or you have misunderstood. It is appropriate to
use event handler attributes to perform scripting with links (and HTML
elements in general), as long as the DTD or an internal subset defines those
attributes for the particular element (it does in this case[1]). However,
the following is not acceptable in most cases:
<a href="javascript:...">...</a>
See also http://jibbering.com/faq/#FAQ4_24 and http://validator.w3.org/checklink
[1]
http://www.w3.org/TR/html4/struct/global.html#h-7.5.1
http://www.w3.org/TR/html4/sgml/dtd.html#events
http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_body
http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_attrs
http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_events
http://www.w3.org/TR/xhtml-modularization/dtd_module_defs.html#dtdelement_body.qname
Obviously the matter is less urgent as I have a version that works (at
least to my satisfaction for now),
You have a lot to learn, young apprentice. That it works in a handful of
tests in a handful of versions of a handful of Web browsers is *never* a
mark of good quality for client-side script code. You have to able to prove
that it can not break.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
.
- Follow-Ups:
- Re: Dynamically assigning functions with parameters to events
- From: Thomas 'PointedEars' Lahn
- Re: Dynamically assigning functions with parameters to events
- References:
- Dynamically assigning functions with parameters to events
- From: Biguana
- Re: Dynamically assigning functions with parameters to events
- From: Thomas 'PointedEars' Lahn
- Re: Dynamically assigning functions with parameters to events
- From: Biguana
- Dynamically assigning functions with parameters to events
- Prev by Date: Is it possible to instance a function in a JSON object?
- Next by Date: Re: Dynamically assigning functions with parameters to events
- Previous by thread: Re: Dynamically assigning functions with parameters to events
- Next by thread: Re: Dynamically assigning functions with parameters to events
- Index(es):
Relevant Pages
|