Benchmark: jQuery body fit onclick filter vs direct - logged now

HTML Preparation code:

<script
			  src="https://code.jquery.com/jquery-3.5.1.min.js"
			  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
			  crossorigin="anonymous"></script>


<form action="#" method="post">
    <div>
        <label for="name">Text Input:</label>
        <input type="text" name="name" class="name" id="name" value="" tabindex="1" />
    </div>

    <div class="wrap">
        <h4>Radio Button Choice</h4>

        <label for="radio-choice-1">Choice 1</label>
        <input type="radio" name="radio-choice-1" class="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

        <label for="radio-choice-2">Choice 2</label>
        <input type="radio" name="radio-choice-2" class="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
    </div>

    <div>
        <label for="select-choice">Select Dropdown Choice:</label>
        <select name="select-choice" class="select-choice" id="select-choice">
            <option value="Choice 1">Choice 1</option>
            <option value="Choice 2">Choice 2</option>
            <option value="Choice 3">Choice 3</option>
        </select>
    </div>

    <div>
        <label for="textarea">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea" class="textarea" id="textarea"></textarea>
    </div>

    <div>
        <label for="checkbox">Checkbox:</label>
        <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" />
    </div>

    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

Script Preparation code:

window.callable = () => 'result';
window.$notIt = $('.select-choice');
window.$it = $('.radio-choice-1');

Tests:

With click on body
$('body').on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();
With click on document
$(document).on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();
With click on window
$(window).on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();
With click on element
$('.select-choice').on('click', window.callable); window.$notIt.click(); window.$it.click();
With click on wrap
$('.wrap').on('click', '.select-choice', window.callable); window.$notIt.click(); window.$it.click();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With click on body
With click on document
With click on window
With click on element
With click on wrap

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0

Browser/OS: Firefox 77 on Fedora

View result in a separate tab

Test name	Executions per second
With click on body	647.2 Ops/sec
With click on document	266.5 Ops/sec
With click on window	191.0 Ops/sec
With click on element	165.6 Ops/sec
With click on wrap	157.8 Ops/sec

jQuery body fit onclick filter vs direct - logged now (version: 3)

https://stackoverflow.com/questions/62402748/jquery-selector-type-on-click-speed

Comparing performance of: With click on body vs With click on document vs With click on window vs With click on element vs With click on wrap

Created: 3 years ago by: Registered User

Jump to the latest result

With click on body

With click on document

With click on window

With click on element

With click on wrap

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A