Javascript bind, event handlers, and jQuery trigger

How does jQuery trigger interact with extra data passed via on versus extra data passed via a bound function?

by kaspervandenberg

HTML

<main>
<ul>
<li>Click <button id="btn1">Button_1</button> to fire bound event handler.</li>
<li>Click <button id="btn2">Button_2</button> to pass extra data via on().</li>
<li>Click <button id="trBtn1">Indirect_1</button> to trigger the click event of Button_1 (which has a bound function event handler).</li>
<li>Click <button id="trBtn2">Indirect_2</button> to trigger the clcik event of Button_2 (which has extra data that is passed via on()).</li>
</ul>
</main>

JavaScript

function f(parToBeBound, event) {
	$('main').append("<section><h>f() was called:</h>\
  	<table>\
    <tr><th>parToBeBound</th><td>" + parToBeBound + "</td></tr>\
    <tr><th>event</th><td>" + event + "</td></tr>\
    </table>")
}

function g(event) {
	$('main').append("<section><h>g() was called:</h>\
  	<table>\
    <tr><th>event</th><td>" + event + "</td></tr>\
    <tr><th>event.data</th><td>" + event.data + "</td></tr>\
    </table>")
}

$('#btn1').on('click', f.bind(null, "Bound value"));
$("#btn2").on('click', null, "Extra data", g);

$("#trBtn1").on('click', function() { $("#btn1").trigger('click'); });
$("#trBtn2").on('click', function() { $("#btn2").trigger('click'); });