Info

When handling dispatching custom events, is it faster to register each callback as a separate listener or to dispatch the event multiple times.

Preparation code

<script>
  var
  listenTo = document
  listenerCount = 100,
      listeners = [],
      listenerFactory = function(fn) {
    return function(event) {
  
     event.target.removeEventListener(
     event.type, arguments.callee, false)
     fn()
    }
      }
      
      
      
      
      function listener(event) {
    this
      }
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

(function() {
 var l = this.listener;
 for (var i = 0; i < listenerCount; i++)
 listenTo.addEventListener("perfTest", listenerFactory(l), false)

 var event = listenTo.createEvent("UIEvents")
 event.initEvent("perfTest", false, false)
 listenTo.dispatchEvent(event)
})()

(function() {
 var l = this.listener,
     event = listenTo.createEvent("UIEvents");
 event.initEvent("multiDispatch", false, false)
 listenTo.addEventListener("multiDispatch", callListener, false)
 for (var i = 0; i < listenerCount; i++)
 dispatch(l)

 function dispatch(listener) {
  event.listener = listener
  listenTo.dispatchEvent(event)
 }

 function callListener(event) {
  var listener = event.listener
  listener.call(event.target)
 }
})()

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by W Alexander on 2nd May 2011
• Revision 2: published on 2nd May 2011
• Revision 3: published on 3rd March 2012

0 comments