click vs. on

JavaScript performance comparison

Test case created

Preparation code

<div id="container">
        <span class="row">1</span>
        <span class="row">2</span>
        <span class="row">3</span>
        <span class="row">4</span>
        <span class="row">5</span>
        <span class="row">6</span>
        <span class="row">7</span>
        <span class="row">8</span>
        <span class="row">9</span>
        <span class="row">10</span>
        <span class="row">11</span>
        <span class="row">12</span>
        <span class="row">13</span>
        <span class="row">14</span>
        <span class="row">15</span>
        <span class="row">16</span>
        <span class="row">17</span>
        <span class="row">18</span>
        <span class="row">19</span>
        <span class="row">20</span>
        <span class="row">21</span>
        <span class="row">22</span>
        <span class="row">23</span>
        <span class="row">24</span>
        <span class="row">25</span>
        <span class="row">26</span>
        <span class="row">27</span>
        <span class="row">28</span>
        <span class="row">29</span>
        <span class="row">30</span>
        <span class="row">31</span>
        <span class="row">32</span>
        <span class="row">33</span>
        <span class="row">34</span>
        <span class="row">35</span>
        <span class="row">36</span>
        <span class="row">37</span>
        <span class="row">38</span>
        <span class="row">39</span>
        <span class="row">40</span>
        <span class="row">41</span>
        <span class="row">42</span>
        <span class="row">43</span>
        <span class="row">44</span>
        <span class="row">45</span>
        <span class="row">46</span>
        <span class="row">47</span>
        <span class="row">48</span>
        <span class="row">49</span>
        <span class="row">50</span>
        <span class="row">51</span>
        <span class="row">52</span>
        <span class="row">53</span>
        <span class="row">54</span>
        <span class="row">55</span>
        <span class="row">56</span>
        <span class="row">57</span>
        <span class="row">58</span>
        <span class="row">59</span>
        <span class="row">60</span>
        <span class="row">61</span>
        <span class="row">62</span>
        <span class="row">63</span>
        <span class="row">64</span>
        <span class="row">65</span>
        <span class="row">66</span>
        <span class="row">67</span>
        <span class="row">68</span>
        <span class="row">69</span>
        <span class="row">70</span>
        <span class="row">71</span>
        <span class="row">72</span>
        <span class="row">73</span>
        <span class="row">74</span>
        <span class="row">75</span>
        <span class="row">76</span>
        <span class="row">77</span>
        <span class="row">78</span>
        <span class="row">79</span>
        <span class="row">80</span>
        <span class="row">81</span>
        <span class="row">82</span>
        <span class="row">83</span>
        <span class="row">84</span>
        <span class="row">85</span>
        <span class="row">86</span>
        <span class="row">87</span>
        <span class="row">88</span>
        <span class="row">89</span>
        <span class="row">90</span>
        <span class="row">91</span>
        <span class="row">92</span>
        <span class="row">93</span>
        <span class="row">94</span>
        <span class="row">95</span>
        <span class="row">96</span>
        <span class="row">97</span>
        <span class="row">98</span>
        <span class="row">99</span>
        <span class="row">100</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Preparation code output

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
click()
var $rows=$(".row");
$rows.click(function() {
  $rows.removeClass("selected");
  $(this).addClass("selected");
});
pending…
on()
var $last;
$('#container').on('click', '.row', function() {
  if ($last) {
    $last.removeClass("selected");
  }
  $last = $(this);
  $last.addClass("selected");
});
pending…

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:

0 comments

Add a comment