Good call on the 1.7 feature, Eric. Most of my Prototype experience has been with earlier versions, so thanks for the update. For the interested reader, a good tutorial link/feature announcement: http://www.prototypejs.org/2010/4/5/prototype-1-7-rc1-sizzle-layout-dimensions-api-event-delegation-and-more The documentation page is here: http://api.prototypejs.org/dom/Event/on/ (Yes, it's for Event#on, but this is the same documentation for Element#on)
The big point for the original questioner to take from the discussion is that it's not necessary to tie the event handler to each lowest- level element; it's often easier (both on the programmer and the browser) to observe it at a parent level once, and let the code handle the difference. Re CDATA ... yes, if you're using HTML5 (and you should be), you don't need it. If you're doing anything that will go through an XML parser, including XHTML, then you should include it. See e.g., http://stackoverflow.com/questions/66837/when-is-a-cdata-section-necessary-within-a-script-tag I'm a bit embarrassed to admit it slipped into the sample code through a TextMate macro. I'll have to go back and tweak the macro. (But goodness, autocomplete is nice!) TAG On Jul 12, 11:30 am, Eric <lefauv...@gmail.com> wrote: > Hello, > > If you're using on() instead of observe(), you can move the up() > outside of the event handler (which makes it reusable in other cases, > and probably has some other advantages since the feature has been > added in Prototype 1.7 :o) ) > > Event.observe('someTable', 'click', function(event) { > var element = Event.element(event).up('tr'); > console.log(element); > > }); > > can be written as: > > $('someTable').on('click', 'tr', function(event,element) { > console.log(element); > > }); > > Since Prototype 1.6, you also have Event.findElement() which is a > convenient way to call both Event.Element() and Element.tr(). > > Also, I am kind of sure using //<![CDATA[ and //]]> around javascript > code has been deprecated a few years ago (but I may be wrong). > > Eric > > On Jul 10, 9:27 pm, Tom Gregory <tagreg...@gmail.com> wrote: > > > > > It sounds like you're trying to do it the hard way. > > > Next question is what browsers do you need to support w/ the rollover > > effect? It can be done entirely via CSS on most everything post IE-6. > > No javascript required. Just add this line: > > tr:hover {background-color:#eed;} > > > The click event (which is neither a mouseenter/mouseleave, which is > > what you asked about), can be handled by attaching a single handler to > > the table, which you've described as sticking around. > > Event.observe('someTable', 'click', function(event) { > > var element = Event.element(event).up('tr'); > > console.log(element); > > }); > > > No setup/teardown required. Full sample code at end. > > > TAG > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
