Hello,
please consider the following code example. It applies the onclick handler to
all image tags, and through window.event it ensures that it works in IE too:
--------------------------------------------------
var imgs =
$(''foo'').getElementsByTagName(''img'');
for(var i=0; i<imgs.length; i++) {
// Apply onclick handler
imgs[i].onclick=function() {
var id = this.id || window.event;
$(id).style.border = ''1px solid white'';
}
}
--------------------------------------------------
This works just fine. Now how can i achieve the same with Event.Observe? I
have replaced the "Apply onclick" part with the code pieces listed
below.
Unfortunately they don''t work in IE, it throws ''null or not an
object'' in
both cases.
1)-----------------------------------------------
// Apply onclick handler
Event.observe(imgs[i], ''click'', function(){
this.style.border = ''1px solid white'';
}, false);
-------------------------------------------------
2)-----------------------------------------------
// Apply onclick handler
Event.observe(imgs[i], ''click'', function(){
var id = this.id || window.event;
$(id).style.border = ''1px solid white'';
}, false);
-------------------------------------------------
I have the feeling i''m missing some important background information
here. Can
the event be passed to the anonymous function, or how does it work? Any help
is appreciated.
--
Dirk Eschler zeitform Internet Dienste
mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org
Fraunhoferstraße 5
PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany
Tel./Fax: +49 (0) http://www.zeitform.de
First of all... set up your event handler in a variable so you can detach it
when it''s no longer needed (good practice to get into). Secondly, use
the prototype function "bindAsEventListener" to get the event passed
into the handler (and to keep "this" in scope), like so...
var myHandler = function(event)
{
event.srcElement.style.border = ''1px solid white'';
}.bindAsEventListener(this);
Event.observe(imgs[i], "click", myHandler);
...then in your dispose (or cleanup stage when these elements or the click
handler is no longer needed), you can do...
Event.stopObserving(imgs[i], "click", myHandler);
myHandler = null;
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Dirk Eschler
Sent: Thursday, February 02, 2006 6:33 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] this pointer in Event.observe function
Hello,
please consider the following code example. It applies the onclick handler to
all image tags, and through window.event it ensures that it works in IE too:
--------------------------------------------------
var imgs =
$(''foo'').getElementsByTagName(''img'');
for(var i=0; i<imgs.length; i++) {
// Apply onclick handler
imgs[i].onclick=function() {
var id = this.id || window.event;
$(id).style.border = ''1px solid white'';
}
}
--------------------------------------------------
This works just fine. Now how can i achieve the same with Event.Observe? I
have replaced the "Apply onclick" part with the code pieces listed
below.
Unfortunately they don''t work in IE, it throws ''null or not an
object'' in
both cases.
1)-----------------------------------------------
// Apply onclick handler
Event.observe(imgs[i], ''click'', function(){
this.style.border = ''1px solid white'';
}, false);
-------------------------------------------------
2)-----------------------------------------------
// Apply onclick handler
Event.observe(imgs[i], ''click'', function(){
var id = this.id || window.event;
$(id).style.border = ''1px solid white'';
}, false);
-------------------------------------------------
I have the feeling i''m missing some important background information
here. Can
the event be passed to the anonymous function, or how does it work? Any help
is appreciated.
--
Dirk Eschler zeitform Internet Dienste
mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org
Fraunhoferstraße 5
PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany
Tel./Fax: +49 (0) http://www.zeitform.de
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
The information transmitted in this electronic mail is intended only for the
person or entity to which it is addressed and may contain confidential,
proprietary, and/or privileged material. Any review, retransmission,
dissemination or other use of, or taking of any action in reliance upon,
this information by persons or entities other than the intended recipient
is prohibited. If you received this in error, please contact the sender and
delete the material from all computers.
Somehow my email lost some carriage returns... code blocks should read...
var myHandler = function(event)
{
event.srcElement.style.border = ''1px solid white'';
}.bindAsEventListener(this);
Event.observe(imgs[i], "click", myHandler);
Event.stopObserving(imgs[i], "click", myHandler);
myHandler = null;
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Ryan Gahl
Sent: Thursday, February 02, 2006 8:27 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: RE: [Rails-spinoffs] this pointer in Event.observe function
First of all... set up your event handler in a variable so you can detach it
when it''s no longer needed (good practice to get into). Secondly, use
the prototype function "bindAsEventListener" to get the event passed
into the handler (and to keep "this" in scope), like so...
var myHandler = function(event)
{
event.srcElement.style.border = ''1px solid white'';
}.bindAsEventListener(this);
Event.observe(imgs[i], "click", myHandler);
...then in your dispose (or cleanup stage when these elements or the click
handler is no longer needed), you can do...
Event.stopObserving(imgs[i], "click", myHandler);
myHandler = null;
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Dirk Eschler
Sent: Thursday, February 02, 2006 6:33 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] this pointer in Event.observe function
Hello,
please consider the following code example. It applies the onclick handler to
all image tags, and through window.event it ensures that it works in IE too:
--------------------------------------------------
var imgs =
$(''foo'').getElementsByTagName(''img'');
for(var i=0; i<imgs.length; i++) {
// Apply onclick handler
imgs[i].onclick=function() {
var id = this.id || window.event;
$(id).style.border = ''1px solid white'';
}
}
--------------------------------------------------
This works just fine. Now how can i achieve the same with Event.Observe? I
have replaced the "Apply onclick" part with the code pieces listed
below.
Unfortunately they don''t work in IE, it throws ''null or not an
object'' in
both cases.
1)-----------------------------------------------
// Apply onclick handler
Event.observe(imgs[i], ''click'', function(){
this.style.border = ''1px solid white'';
}, false);
-------------------------------------------------
2)-----------------------------------------------
// Apply onclick handler
Event.observe(imgs[i], ''click'', function(){
var id = this.id || window.event;
$(id).style.border = ''1px solid white'';
}, false);
-------------------------------------------------
I have the feeling i''m missing some important background information
here. Can
the event be passed to the anonymous function, or how does it work? Any help
is appreciated.
--
Dirk Eschler zeitform Internet Dienste
mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org
Fraunhoferstraße 5
PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany
Tel./Fax: +49 (0) http://www.zeitform.de
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
The information transmitted in this electronic mail is intended only for the
person or entity to which it is addressed and may contain confidential,
proprietary, and/or privileged material. Any review, retransmission,
dissemination or other use of, or taking of any action in reliance upon,
this information by persons or entities other than the intended recipient
is prohibited. If you received this in error, please contact the sender and
delete the material from all computers.
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Am Donnerstag, 2. Februar 2006 15:29 schrieb Ryan Gahl:> Somehow my email lost some carriage returns... code blocks should read... > > var myHandler = function(event) > { > event.srcElement.style.border = ''1px solid white''; > > }.bindAsEventListener(this); > > Event.observe(imgs[i], "click", myHandler);[..] Hi Ryan, thanks alot for your help. To make this work in Firefox i had to do another event system check. var myHandler=function(event) { var el = event.target || event.srcElement; el.style.border = ''1px solid white''; }.bindAsEventListener(this); Event.observe(imgs[i], "click", myHandler); Just wondering, isn''t the framework supposed to do this check? -- Dirk Eschler zeitform Internet Dienste mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org Fraunhoferstraße 5 PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany Tel./Fax: +49 (0) http://www.zeitform.de
Event.element(evt).style.border = ''...'' does the trick for you brgds sigi 2006/2/2, Dirk Eschler <eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org>:> > Am Donnerstag, 2. Februar 2006 15:29 schrieb Ryan Gahl: > > Somehow my email lost some carriage returns... code blocks should > read... > > > > var myHandler = function(event) > > { > > event.srcElement.style.border = ''1px solid white''; > > > > }.bindAsEventListener(this); > > > > Event.observe(imgs[i], "click", myHandler); > [..] > > Hi Ryan, > > thanks alot for your help. To make this work in Firefox i had to do > another > event system check. > > var myHandler=function(event) { > var el = event.target || event.srcElement; > el.style.border = ''1px solid white''; > }.bindAsEventListener(this); > Event.observe(imgs[i], "click", myHandler); > > Just wondering, isn''t the framework supposed to do this check? > > -- > Dirk Eschler zeitform Internet Dienste > mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org Fraunhoferstraße 5 > PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany > Tel./Fax: +49 (0) http://www.zeitform.de > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >-- Mit freundlichen Grüßen Siegfried Puchbauer _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Yea, sorry, I forgot to put the prototype abstracted function to get the event element instead of event.srcElement (which is a browser specific variable). ________________________________ From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Siegfried Puchbauer Sent: Thursday, February 02, 2006 9:51 AM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: Re: [Rails-spinoffs] this pointer in Event.observe function Event.element(evt).style.border = ''...'' does the trick for you brgds sigi 2006/2/2, Dirk Eschler <eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org>: Am Donnerstag, 2. Februar 2006 15:29 schrieb Ryan Gahl:> Somehow my email lost some carriage returns... code blocks should read... > > var myHandler = function(event) > { > event.srcElement.style.border = ''1px solid white''; > > }.bindAsEventListener(this); > > Event.observe(imgs[i], "click", myHandler);[..] Hi Ryan, thanks alot for your help. To make this work in Firefox i had to do another event system check. var myHandler=function(event) { var el = event.target || event.srcElement; el.style.border = ''1px solid white''; }.bindAsEventListener(this); Event.observe(imgs[i], "click", myHandler); Just wondering, isn''t the framework supposed to do this check? -- Dirk Eschler zeitform Internet Dienste mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org Fraunhoferstraße 5 PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany Tel./Fax: +49 (0) http://www.zeitform.de _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs -- Mit freundlichen Grüßen Siegfried Puchbauer The information transmitted in this electronic mail is intended only for the person or entity to which it is addressed and may contain confidential, proprietary, and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from all computers. _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Am Donnerstag, 2. Februar 2006 16:56 schrieb Ryan Gahl:> Yea, sorry, I forgot to put the prototype abstracted function to get the > event element instead of event.srcElement (which is a browser specific > variable). > > ________________________________ > > From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of > Siegfried Puchbauer Sent: Thursday, February 02, 2006 9:51 AM > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > Subject: Re: [Rails-spinoffs] this pointer in Event.observe function > > > Event.element(evt).style.border = ''...'' does the trick for you > > brgds > > sigiPerfect. Thanks again! -- Dirk Eschler zeitform Internet Dienste mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org Fraunhoferstraße 5 PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany Tel./Fax: +49 (0) http://www.zeitform.de
Or use:
Element.setStyle(Event.element(evt), { border: ''...'' });
(especially useful if you need to set more than one style).
-Thomas
Am 02.02.2006 um 16:50 schrieb Siegfried Puchbauer:
> Event.element(evt).style.border = ''...'' does the trick
for you
>
> brgds
>
> sigi
>
> 2006/2/2, Dirk Eschler
<eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org>:
> Am Donnerstag, 2. Februar 2006 15:29 schrieb Ryan Gahl:
> > Somehow my email lost some carriage returns... code blocks should
> read...
> >
> > var myHandler = function(event)
> > {
> > event.srcElement.style.border = ''1px solid
white'';
> >
> > }.bindAsEventListener(this);
> >
> > Event.observe(imgs[i], "click", myHandler);
> [..]
>
> Hi Ryan,
>
> thanks alot for your help. To make this work in Firefox i had to do
> another
> event system check.
>
> var myHandler=function(event) {
> var el = event.target || event.srcElement;
> el.style.border = ''1px solid white'';
> }.bindAsEventListener(this);
> Event.observe(imgs[i], "click", myHandler);
>
> Just wondering, isn''t the framework supposed to do this check?
>
> --
> Dirk Eschler zeitform Internet Dienste
> mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org
Fraunhoferstraße 5
> PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany
> Tel./Fax: +49 (0) http://www.zeitform.de
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
> --
> Mit freundlichen Grüßen
>
> Siegfried Puchbauer
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Am Freitag, 3. Februar 2006 10:11 schrieb Thomas Fuchs:> Or use: > > Element.setStyle(Event.element(evt), { border: ''...'' }); > > (especially useful if you need to set more than one style). > > -ThomasDicovering a new useful feature every day. :) Thanks Thomas! -- Dirk Eschler zeitform Internet Dienste mailto:eschler-zc1r9W/44D4b1SvskN2V4Q@public.gmane.org Fraunhoferstraße 5 PGP S/MIME: http://key.zeitform.de/ap 64283 Darmstadt, Germany Tel./Fax: +49 (0) http://www.zeitform.de
Reasonably Related Threads
- Ajax.Request: onLoading executed after onComplete in IE
- Height problem after interrupting SlideDown/SlideUp effects
- Draggables and Droppable performance (tips)
- RE: Yahoo!-like Eventobjectemulation/abstractioninPrototype?
- RE: Question about event listener highlighting withchild elements