[Cosmo-dev] Event listeners for UI elements

[Matthew Eernisse]

I did a quickie test so we'd have some actual data to look at for the 
speed difference between single local listener with custom props versus 
attaching a listener to each UI element.

It's a pretty naive test, but here's what I did:

1. Create and append 100 divs, attaching three onclick event listeners 
to each as they're created (the current event lozenges have three 
clickable areas -- eventually they'll have more).

2. Create 100 divs, give each one three custom properties, and attach a 
single, local event listener to the div they live on.

I did timing with Firebug's console.time. Here are results of a few test 
runs:

attachListeners: 773ms
localListener: 19ms

attachListeners: 784ms
localListener: 21ms

attachListeners: 705ms
localListener: 18ms

attachListeners: 769ms
localListener: 20ms

attachListeners: 1001ms
localListener: 19ms

attachListeners: 701ms
localListener: 18ms

attachListeners: 703ms
localListener: 19ms

The code I used is attached.

Looks like the speed difference is big.

The custom properties are just set on the DOM nodes to tell you what 
piece of the UI was clicked/manipulated -- they have no connection to 
properties on the actual business objects. I can't think of any reason 
you'd be changing those around unless you're changing the actual UI as well.

Give those numbers, I'm inclined to go with a simple change for the 
lozenges of setting a listener on the canvas and replacing the id/regex 
with custom props, rather than trying to assign event listeners to each 
one individually.


Matthew
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osafoundation.org/pipermail/cosmo-dev/attachments/20061109/99934500/index.html