Speed up DOM processing in IE

[atlguy]

Does anyone have any ideas on how I can make this work any faster? The
page I am working on has about 100 tooltips and it locks up the
browser for quite a long time in IE. I've tried to restrict the search
so a specific block of html by using the parent ID but it's still
slow.

this.addObserver(mojo.query("#content .tooltip-trigger"),
"onmouseover", "ToolTip", function(context, caller)

[atlguy]

I actually figured it out. Using an id pattern was very fast.

this.addObserver(dojo.query("[id^='tooltip-trigger']"), "onmouseover",
"ToolTip", function(context, caller) {

[Loyal Chow]

Actually, using Mojo event delegation would be the fastest, because it wouldn't execute any DOM queries until a user interaction happened. Whereas using mojo.query (or dojo.query) as the first parameter will execute a query on the entire DOM on load of page, which is very slow.

To use event delegation, simply use a string query as the first parameter of addObserver, and ensure the event being fired bubbles up (such as onclick, onmouseover, etc.). Mojo will do the rest!

Example:
this.addObserver(".tooltip-trigger", "onmouseover", "ToolTip", function(context, caller)...);

Also, a simple string query such as the class selector above is the fastest

Here's some more info on event delegation:
http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/
http://icant.co.uk/sandbox/eventdelegation/

[atlguy]

That sounds like a great solution. So much to learn!!

I did try that as you suggested and nothing happens. I put in some
debug inside that observer and it never gets fired on mouseover.

On Jun 15, 1:20 pm, Loyal Chow <loyalc...@gmail.com> wrote:
> Actually, using Mojo event delegation would be the fastest, because it
> wouldn't execute any DOM queries until a user interaction happened. Whereas
> using mojo.query (or dojo.query) as the first parameter will execute a query
> on the entire DOM on load of page, which is very slow.
>
> To use event delegation, simply use a string query as the first parameter of
> addObserver, and ensure the event being fired bubbles up (such as onclick,
> onmouseover, etc.). Mojo will do the rest!
>
> Example:
> this.addObserver(".tooltip-trigger", "onmouseover", "ToolTip",
> function(context, caller)...);
>
> Also, a simple string query such as the class selector above is the fastest
>
> Here's some more info on event delegation:

> *http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/http://icant.co.uk/sandbox/eventdelegation/

[Cary Newfeldt]

It might be an issue of case-sensitive event call. Try onMouseOver.

On 10-06-16 10:25 AM, "atlguy" <rob...@sekman.com> wrote:

onmouseover

[Jaime Bueza]

If you're using a string as the first parameter and you're still not
receiving the event with "onmouseover" then that means
.tooltip-trigger isn't within the context of the controller. Do you
have any code samples? Would you mind gisting it over here
http://gist.github.com/ (both the markup and the controller and the
behavior)? What tooltip behavior is that (is it Mojo's stdlib one or
jQuery or Mootools)?

You mentioned IE, which version? I'm assuming 6?