Info

Comparison between three different methods of triggering events for use in unit testing.

1. jQuery's trigger
2. Native browser events using document.createEvent
3. Native browser events using jQuery's simulate plugin

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//johnkpaul.github.com/jquery-simulate/jquery.simulate.js">
</script>
<script>
  Benchmark.prototype.setup = function() {
    window.$el = jQuery("<div id='test'></div>").appendTo(document.body);
  };

  Benchmark.prototype.teardown = function() {
    window.$el.remove();
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

// async test
window.$el.one("click", function() {
  setTimeout(function() {
    deferred.resolve();
  }, 10);
});

window.$el.trigger("click");

// async test
window.$el.one("click", function() {
  setTimeout(function() {
    deferred.resolve();
  }, 10);
})

var el = window.$el.get(0);
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(event);

// async test
window.$el.one("click", function() {
  setTimeout(function() {
    deferred.resolve();
  }, 10);
});

window.$el.simulate("click");

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 John K Paul on 27th March 2012
• Revision 2: published on 13th December 2012
• Revision 3: published on 17th January 2013
• Revision 4: published on 9th February 2013
• Revision 5: published on 4th March 2013

0 comments