comparing various selectors for click events in jquery

Benchmark created by Ho Yin Cheng on


Preparation HTML

<table id="game-grid">
    <tbody>
        <tr>
            <td id="cell-0-0" class="active"></td>
            <td id="cell-0-1"></td>
            <td id="cell-0-2"></td>
            <td id="cell-0-3"></td>
            <td id="cell-0-4"></td>
        </tr>
        <tr>
            <td id="cell-1-0" class="active"></td>
            <td id="cell-1-1"></td>
            <td id="cell-1-2"></td>
            <td id="cell-1-3"></td>
            <td id="cell-1-4" class="active"></td>
        </tr>
        <tr>
            <td id="cell-2-0"></td>
            <td id="cell-2-1"></td>
            <td id="cell-2-2" class="active"></td>
            <td id="cell-2-3"></td>
            <td id="cell-2-4"></td>
        </tr>
        <tr>
            <td id="cell-3-0"></td>
            <td id="cell-3-1"></td>
            <td id="cell-3-2" class="selected"></td>
            <td id="cell-3-3"></td>
            <td id="cell-3-4" class="active"></td>
        </tr>
        <tr>
            <td id="cell-4-0" class="active"></td>
            <td id="cell-4-1" class="active"></td>
            <td id="cell-4-2"></td>
            <td id="cell-4-3"></td>
            <td id="cell-4-4" class="selected"></td>
        </tr>
    </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
checking for class on any table cell click
        $("#game-grid").on('click', 'td', function() {
          if ($(this).hasClass('active')) {
            console.log("active");
          } else if ($(this).hasClass('selected')) {
            console.log("selected");
          }
        });
ready
filtering by class instead (two handlers)
        $("#game-grid").on('click', 'td.active', function() {
          console.log("active");
        });
        $("#game-grid").on('click', 'td.selected', function() {
          console.log("selected");
        });
ready
non-delegation method
        $("#game-grid td.active").click(function(event) {
          console.log("active");
        });
        $("#game-grid td.selected").click(function(event) {
          console.log("selected");
        });
ready
using attribute selectors
        $("#game-grid").on('click', "td[id^='cell-'][class='active']", function() {
          console.log("active");
        });
        $("#game-grid").on('click', "td[id^='cell-'][class='selected']", function() {
          console.log("selected");
        });
ready
select by class only
        $("td.active").click(function(event) {
          console.log("active");
        });
        $("td.selected").click(function(event) {
          console.log("selected");
        });
ready
non-delegation and checking for class on all cells
        $("#game-grid td").click(function(event) {
          if ($(this).hasClass('active')) {
            console.log("active");
          } else if ($(this).hasClass('selected')) {
            console.log("selected");
          }
        });
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Ho Yin Cheng on