test delegation and foreach

Benchmark created on


Preparation HTML

<div id="ontap" class="list-item active">
                        <div class="list-group">
                            <h5 class="">Chương 1</h5>
                            <ul class="list">
                                <li data="1" class="th1 selected">TH 1</li>
                                <li data="2" class="th2">TH 2</li>
                                <li data="3" class="th3">TH 3</li>
                                <li data="4" class="th4">TH 4</li>
                                <li data="5" class="th5">TH 5</li>
                                <li data="6" class="th6">TH 6</li>
                                <li data="7" class="th7">TH 7</li>
                                <li data="8" class="th8">TH 8</li>
                                <li data="9" class="th9">TH 9</li>
                                <li data="10" class="th10">TH 10</li>
                                <li data="11" class="th11">TH 11</li>
                                <li data="12" class="th12">TH 12</li>
                                <li data="13" class="th13">TH 13</li>
                                <li data="14" class="th14">TH 14</li>
                                <li data="15" class="th15">TH 15</li>
                                <li data="16" class="th16">TH 16</li>
                                <li data="17" class="th17">TH 17</li>
                                <li data="18" class="th18">TH 18</li>
                                <li data="19" class="th19">TH 19</li>
                                <li data="20" class="th20">TH 20</li>
                                <li data="21" class="th21">TH 21</li>
                                <li data="22" class="th22">TH 22</li>
                                <li data="23" class="th23">TH 23</li>
                                <li data="24" class="th24">TH 24</li>
                                <li data="25" class="th25">TH 25</li>
                                <li data="26" class="th26">TH 26</li>
                                <li data="27" class="th27">TH 27</li>
                                <li data="28" class="th28">TH 28</li>
                                <li data="29" class="th29">TH 29</li>
                            </ul>
                        </div>
                        <div class="list-group">
                            <h5>Chương 2</h5>
                            <ul class="list">
                                <li data="30" class="th30">TH 30</li>
                                <li data="31" class="th31">TH 31</li>
                                <li data="32" class="th32">TH 32</li>
                                <li data="33" class="th33">TH 33</li>
                                <li data="34" class="th34">TH 34</li>
                                <li data="35" class="th35">TH 35</li>
                                <li data="36" class="th36">TH 36</li>
                                <li data="37" class="th37">TH 37</li>
                                <li data="38" class="th38">TH 38</li>
                                <li data="39" class="th39">TH 39</li>
                                <li data="40" class="th40">TH 40</li>
                                <li data="41" class="th41">TH 41</li>
                                <li data="42" class="th42">TH 42</li>
                                <li data="43" class="th43">TH 43</li>
                            </ul>
                        </div>

                        <div class="list-group">
                            <h5>Chương 3</h5>
                            <ul class="list">
                                <li data="44" class="th44">TH 44</li>
                                <li data="45" class="th45">TH 45</li>
                                <li data="46" class="th46">TH 46</li>
                                <li data="47" class="th47">TH 47</li>
                                <li data="48" class="th48">TH 48</li>
                                <li data="49" class="th49">TH 49</li>
                                <li data="50" class="th50">TH 50</li>
                                <li data="51" class="th51">TH 51</li>
                                <li data="52" class="th52">TH 52</li>
                                <li data="53" class="th53">TH 53</li>
                                <li data="54" class="th54">TH 54</li>
                                <li data="55" class="th55">TH 55</li>
                                <li data="56" class="th56">TH 56</li>
                                <li data="57" class="th57">TH 57</li>
                                <li data="58" class="th58">TH 58</li>
                                <li data="59" class="th59">TH 59</li>
                                <li data="60" class="th60">TH 60</li>
                                <li data="61" class="th61">TH 61</li>
                                <li data="62" class="th62">TH 62</li>
                                <li data="63" class="th63">TH 63</li>
                            </ul>
                        </div>
                        <div class="list-group">
                            <h5>Chương 4</h5>
                            <ul class="list">
                                <li data="64" class="th64">TH 64</li>
                                <li data="65" class="th65">TH 65</li>
                                <li data="66" class="th66">TH 66</li>
                                <li data="67" class="th67">TH 67</li>
                                <li data="68" class="th68">TH 68</li>
                                <li data="69" class="th69">TH 69</li>
                                <li data="70" class="th70">TH 70</li>
                                <li data="71" class="th71">TH 71</li>
                                <li data="72" class="th72">TH 72</li>
                                <li data="73" class="th73">TH 73</li>
                            </ul>
                        </div>
                        <div class="list-group">
                            <h5>Chương 5</h5>
                            <ul class="list">
                                <li data="74" class="th74">TH 74</li>
                                <li data="75" class="th75">TH 75</li>
                                <li data="76" class="th76">TH 76</li>
                                <li data="77" class="th77">TH 77</li>
                                <li data="78" class="th78">TH 78</li>
                                <li data="79" class="th79">TH 79</li>
                                <li data="80" class="th80">TH 80</li>
                                <li data="81" class="th81">TH 81</li>
                                <li data="82" class="th82">TH 82</li>
                                <li data="83" class="th83">TH 83</li>
                                <li data="84" class="th84">TH 84</li>
                                <li data="85" class="th85">TH 85</li>
                                <li data="86" class="th86">TH 86</li>
                                <li data="87" class="th87">TH 87</li>
                                <li data="88" class="th88">TH 88</li>
                                <li data="89" class="th89">TH 89</li>
                                <li data="90" class="th90">TH 90</li>
                            </ul>
                        </div>
                        <div class="list-group">
                            <h5>Chương 6</h5>
                            <ul class="list">
                                <li data="91" class="th91">TH 91</li>
                                <li data="92" class="th92">TH 92</li>
                                <li data="93" class="th93">TH 93</li>
                                <li data="94" class="th94">TH 94</li>
                                <li data="95" class="th95">TH 95</li>
                                <li data="96" class="th96">TH 96</li>
                                <li data="97" class="th97">TH 97</li>
                                <li data="98" class="th98">TH 98</li>
                                <li data="99" class="th99">TH 99</li>
                                <li data="100" class="th100">TH 100</li>
                                <li data="101" class="th101">TH 101</li>
                                <li data="102" class="th102">TH 102</li>
                                <li data="103" class="th103">TH 103</li>
                                <li data="104" class="th104">TH 104</li>
                                <li data="105" class="th105">TH 105</li>
                                <li data="106" class="th106">TH 106</li>
                                <li data="107" class="th107">TH 107</li>
                                <li data="108" class="th108">TH 108</li>
                                <li data="109" class="th109">TH 109</li>
                                <li data="110" class="th110">TH 110</li>
                                <li data="111" class="th111">TH 111</li>
                                <li data="112" class="th112">TH 112</li>
                                <li data="113" class="th113">TH 113</li>
                                <li data="114" class="th114">TH 114</li>
                                <li data="115" class="th115">TH 115</li>
                                <li data="116" class="th116">TH 116</li>
                                <li data="117" class="th117">TH 117</li>
                                <li data="118" class="th118">TH 118</li>
                                <li data="119" class="th119">TH 119</li>
                                <li data="120" class="th120">TH 120</li>
                            </ul>
                        </div>
                    </div>

Setup

var list = document.querySelector(".list-item");
    list.addEventListener("click", function(event) {
    	if (event.target.tagName === li) {
    		idTH = item.getAttribute("data");
    	}
    });

Test runner

Ready to run.

Testing in
TestOps/sec
delegation
var list = document.querySelector(".list-item");
    list.addEventListener("click", function(event) {
    	if (event.target.tagName === li) {
    		idTH = item.getAttribute("data");
    	}
    });
ready
foreach
var list = document.querySelectorAll(".list li");
list.forEach(function (item) {
      item.addEventListener("click", function () {
        idTH = item.getAttribute("data");
      });
});
ready

Revisions

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