Direct Event listener, instead of propagation.

I've been working on profiling a scroll view in my application that was inexplicably slow and ran into something interesting. I have a component that needs to update its styles every frame during scroll animation.

To do this, I have a handler for the onScroll event that calculates and applies the necessary changes. To achieve yank-free 60fps scrolling, this handler has to execute within a 16ms budget. However, it took roughly 45ms instead, leading to a bad scroll experience.

After some profiling, it appears that simply bubbling a single onScroll event was taking a whopping ~37ms! However, almost none of the components that receive and propagate the event had any handlers to execute. It seems a lot of time is wasted simply by passing the event from one component to the next.

So this leads me to the question:
Is there a way for one component listen to another component's events *directly* without the need for multiple intermediaries to propagate the event through the component tree?

I'm thinking along the lines of observer support, which can be used to watch for changes on very specific components without the need for a chain of multiple levels of bindings. Does Enyo have a similar mechanism I can use for the enyo.Scroller's onScroll event?


  • EventEmitter is the closest thing but you'd have to override enyo.Scroller to emit a new event. However, if you're going to have to override Scroller, you might be better of writing a more focused solution for your specific situation since performance is your primary concern.
  • Interesting, I'll look into the EventEmitter.

    For now, my most focused solution is to stop propagation of the scroll events when I don't need them anymore. The component that needs to respond is a decorator for the scroller and only lives 2 levels up the tree. After that, I had no need for the event.
  • enyo.Signals might do what you want
Sign In or Register to comment.