Re: event handling with css selectors

Posted by Alessandro Vernet on
URL: https://discuss.orbeon.com/event-handling-with-css-selectors-tp31996p31997.html

Henrik,

This code looks good when executed by the over-head projector, but it
can be very slow when executed by a browser on a large page.

The implementation (Behaviour, or event:Selector) needs to find the
elements that match the selector. Say your selector is "a.clazz", it
needs to find all the <a> that have a class="clazz" (with maybe other
classes). Unfortunately there is no way to do this efficiently with
the DOM API on large pages. YUI have methods to do this, that are
maybe more efficient than what one would write without thinking too
much about performance, but those methods are still slow. So it is
better to avoid (and I think now we completely got rid of) code that
does things like looking for all the <a> with class "clazz".

Alex

On 12/19/06, Henrik Pettersen <[hidden email]> wrote:

> All,
>
> I came across this rather neat way of handling events using css selectors:
> http://encytemedia.com/event-selectors/
>
> Perhaps this could be used for templating xforms controls?
>
>    '#hover-text a:mouseover': function(element) {
>        /* the rest follows from onmouseover in xforms.css (848)*
>         var target =
> ORBEON.xforms.Events._findParentXFormsControl
> (YAHOO.util.Event.getTarget(event));
>         if (target != null) {
>
>             if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")) {
>                 // Show help tool-tip
>                 var label = target.nextSibling;
>                 while (!ORBEON.util.Dom.isElement(label))
> label = target.nextSibling;
>                 var control = document.getElementById(label.htmlFor);
>                 ORBEON.xforms.Events._showToolTip (event,
> label, "xforms-help",
> ORBEON.xforms.Controls.getHelpMessage(control));
>             } else if (ORBEON.util.Dom.hasClass(target,
> "xforms-alert-active")) {
>                 var control = document.getElementById (target.htmlFor);
>                 var message =
> ORBEON.xforms.Controls.getAlertMessage(control);
>                 if (message != "") {
>                     // Show alert tool-tip
>                     ORBEON.xforms.Events._showToolTip
> (event, target, "xforms-alert",
> ORBEON.xforms.Controls.getAlertMessage(control));
>                 }
>             }
>         }
>
>    },
>
>    '#icons a:mouseout': function(element) {
>         /* the rest follows from onmouseover in xforms.css (848)*
>         var target =
> ORBEON.xforms.Events._findParentXFormsControl(YAHOO.util.Event.getTarget(event));
>         if (target != null) {
>
>             // Hide help
>             if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")
>                     || ORBEON.util.Dom.hasClass(target,
> "xforms-alert-active"))
>                 tt_Hide();
>         }
>    }
>
> I'm going to give them a whirl.
>
> Henrik
>
>
>
>
> --
> You receive this message as a subscriber of the [hidden email]
> mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
>
>
>

--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet