Ryan Gahl
2006-Mar-04 05:26 UTC
RE: Question about event listener highlighting withchild elements
1. Create a separate class that has your highlight/unhighlight behavior
in it, and extend just the element you want to highlight with that
class... like this (also allows you to easily apply this behavior
elsewhere when you need it in the future):
Object.extend(this.el, HighlightBehaviorClass.prototype)
2. When defining your event handlers, assign them to variables so you
have a handle to properly dispose of them, like this:
this.mouseOver_Listener = this.highight.bindAsEventListener(this);
Event.observe(this, "mouseover", this.mouseOver_Listener);
...now this will work...
Event.stopObserving(this, "mouseover", this.mouseOver_Listener);
________________________________
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Casey
O''Neill
Sent: Friday, March 03, 2006 6:09 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Question about event listener highlighting
withchild elements
I have created a JavaScript object which is initialized for some input
fields, fieldsets, and divs on the page. With each object i attach a
mouseover and mouseout event that highlights and un-highlights. Also on
mouseout i am trying to display the id of the object to a console. The
highlighting works except for cases when an object is the child of
another object. In this case both are highlighted and only the parent''s
id is currently. I want only the child to be highlighted and the
child(not parent) id to be displayed.
The second issue is stopping the event listeners when the objects are
deactivated. At some point I take the list of objects and deactivate
each one. In the deactivate method I Call Event.stopObserving. This
seems to have no effect because the highlight method continues to be
called.
Thanks for you help.
Casey
/*****************************************************************/
var secureComponent = Class.create();
secureComponent.prototype = {
idPath : 0,
console : '''',
oBackgroundColor : '''',
el : '''',
initialize: function(value) {
this.idPath = findSecurityIdPath(value);
//Event.observe(value, ''click'',
this.activate.bindAsEventListener(this), false);
this.el = value;
Event.observe(value, ''mouseover'',
this.highlight.bindAsEventListener(this), false);
Event.observe(value, ''mouseout'',
this.unhighlight.bindAsEventListener(this), false);
value.onclick = function(){return false;};
this.console = $("console");
},
activate: function(){
if(this.console != null)
this.console.innerHTML =this.idPath;
},
deactivate: function(){
this.idPath = '''';
this.console = '''';
this.el.style.backgroundColor = this.oBackgroundColor;
Event.stopObserving(this.el, ''mouseout'',
this.unhighlight.bindAsEventListener (this), false);
Event.stopObserving(this.el, ''mouseover'',
this.highlight.bindAsEventListener(this), false);
this.el = null;
},
findSecurityIdPath: function(srcElement)
{
var el;
for (el = srcElement; el != null; el = el.parentNode)
{
if(el.attributes)
{
var idPathAttrib
el.attributes.getNamedItem("securityIdPath");
var idPath = idPathAttrib ? idPathAttrib.value : false;
if (idPath)
return idPath;
}
}
return null;
},
highlight: function(e)
{
this.oBackgroundColor = this.el.style.backgroundColor;
this.el.style.backgroundColor = "#FFFFAA";
this.log(idPath);
},
log: function(msg)
{
if(this.console != null)
this.console.innerHTML =msg;
},
unhighlight: function(e)
{
this.el.style.backgroundColor = this.oBackgroundColor;
}
}
/*****************************************************************/
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
Casey O''Neill
2006-Mar-06 16:10 UTC
Re: Question about event listener highlighting withchild elements
Thanks for the help Ryan. Both of your suggestions worked perfectly. On 3/4/06, Ryan Gahl <Ryan.Gahl-nlycWCgr5/vuufBYgWm87A@public.gmane.org> wrote:> > 1. Create a separate class that has your highlight/unhighlight behavior > in it, and extend just the element you want to highlight with that class… > like this (also allows you to easily apply this behavior elsewhere when you > need it in the future): > > > > Object.extend(this.el, HighlightBehaviorClass.prototype) > > > > 2. When defining your event handlers, assign them to variables so you have > a handle to properly dispose of them, like this: > > > > this.mouseOver_Listener = this.highight.bindAsEventListener(this); > > Event.observe(this, "mouseover", this.mouseOver_Listener); > > > > …now this will work… > > > > Event.stopObserving(this, "mouseover", this.mouseOver_Listener); > > > ------------------------------ > > *From:* rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto: > rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] *On Behalf Of *Casey O''Neill > *Sent:* Friday, March 03, 2006 6:09 PM > *To:* rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > *Subject:* [Rails-spinoffs] Question about event listener highlighting > withchild elements > > > > I have created a JavaScript object which is initialized for some input > fields, fieldsets, and divs on the page. With each object i attach a > mouseover and mouseout event that highlights and un-highlights. Also on > mouseout i am trying to display the id of the object to a console. The > highlighting works except for cases when an object is the child of another > object. In this case both are highlighted and only the parent''s id is > currently. I want only the child to be highlighted and the child(not parent) > id to be displayed. > > The second issue is stopping the event listeners when the objects are > deactivated. At some point I take the list of objects and deactivate each > one. In the deactivate method I Call Event.stopObserving. This seems to > have no effect because the highlight method continues to be called. > > Thanks for you help. > > Casey > > > /*****************************************************************/ > var secureComponent = Class.create(); > > secureComponent.prototype = { > > idPath : 0, > console : '''', > oBackgroundColor : '''', > el : '''', > > initialize: function(value) { > this.idPath = findSecurityIdPath(value); > //Event.observe(value, ''click'', this.activate.bindAsEventListener(this), > false); > this.el = value; > Event.observe(value, ''mouseover'', > this.highlight.bindAsEventListener(this), false); > Event.observe(value, ''mouseout'', > this.unhighlight.bindAsEventListener(this), false); > value.onclick = function(){return false;}; > this.console = $("console"); > }, > > activate: function(){ > if(this.console != null) > this.console.innerHTML =this.idPath; > }, > > deactivate: function(){ > this.idPath = ''''; > this.console = ''''; > this.el.style.backgroundColor = this.oBackgroundColor; > Event.stopObserving(this.el, ''mouseout'', > this.unhighlight.bindAsEventListener (this), false); > Event.stopObserving(this.el, ''mouseover'', > this.highlight.bindAsEventListener(this), false); > this.el = null; > }, > > findSecurityIdPath: function(srcElement) > { > var el; > for (el = srcElement; el != null; el = el.parentNode) > { > if(el.attributes) > { > var idPathAttrib = el.attributes.getNamedItem("securityIdPath"); > > var idPath = idPathAttrib ? idPathAttrib.value : false; > if (idPath) > return idPath; > } > } > > return null; > }, > > highlight: function(e) > { > this.oBackgroundColor = this.el.style.backgroundColor; > this.el.style.backgroundColor = "#FFFFAA"; > this.log(idPath); > }, > > log: function(msg) > { > if(this.console != null) > this.console.innerHTML =msg; > }, > > unhighlight: function(e) > { > this.el.style.backgroundColor = this.oBackgroundColor; > } > } > /*****************************************************************/ > > 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 > > >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs