$(document).on or added a event listener to each specific elements

JavaScript performance comparison

Test case created by Yutaka Yamaguchi

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<div class="mod sortable-header" id="area-action">
  <select class="first-child" name="itemlist" id="itemlist">
    <option value="0" id="opt-0" class="first-child last-child">
      ルート
    </option>
    <option value="24" id="opt-24">
      foobar6
    </option>
    <option value="25" id="opt-25">
      foobar5
    </option>
    <option value="26" id="opt-26">
      foobar4
    </option>
    <option value="27" id="opt-27">
      foobar3
    </option>
    <option value="28" id="opt-28">
      foobar2
    </option>
    <option value="13" id="opt-13">
      foobar
    </option>
    <option value="11" id="opt-11">
      foobarカテゴリを追加
    </option>
    <option value="12" id="opt-12">
      -&nbsp;foobar
    </option>
  </select>
  <input type="text" placeholder="カテゴリ名" class="text short" name="category_label">
  <button class="add button last-child" type="submit">
    追加
  </button>
</div>
<div class="pcat-0 lv-0 sortable-item" id="cat-24" style="margin-left: 0px;">
  <span class="sort-tab" style="display: none;">
  </span>
  <span class="item-label" style="display: none;">
    <a href="/cgi-bin/mt/movabletype/mt.cgi?__mode=view&amp;_type=category&amp;blog_id=4&amp;id=24">foobar6</a>
  </span>
  <span class="item-basename" style="display: none;">
    <span class="item-basename-text">
      foobar6
    </span>
  </span>
  <span class="count" style="display: none;">
    <a href="/cgi-bin/mt/movabletype/mt.cgi?__mode=list&amp;filter=category_id&amp;_type=entry&amp;blog_id=4&amp;filter_val=24">記事0 件</a>
  </span>
  <span class="item-ctrl" style="display: none;">
    <a class="item-action edit-link clickable" href="#">名前を変更</a>
    <span class="item-action plus clickable icon-plus icon16 action-icon">
      サブカテゴリを追加する
    </span>
    <span class="item-action delete clickable icon-delete icon16 action-icon">
      カテゴリを削除する
    </span>
  </span>
  <div class="edit-form">
    <input type="text" placeholder="名前" class="text short label" name="category_label">
    <input type="text" placeholder="出力ファイル名" class="text short basename" name="category_basename">
    <button class="rename button" type="submit">
      名前を変更
    </button>
    <button class="cancel button" type="button">
      キャンセル
    </button>
  </div>
</div>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
single event listener to document
$(document).on('keyup focusin focusout', 'input, textarea', function(e) {
  console.log(e.type + 'fired');
})
pending…
some event listener to specific elements
$('input,textarea').on('keyup focusin focusout', function(e) {
  console.log(e.type + 'fired');
})
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