JQ .trigger & .triggerHandler

Demo of .trigger() & .triggerHandler() in JQuery. We can use .triggerHandler() to return values from event handler to the caller. In case of multiple handlers, the result can be combined, but it needs to be done by each event handler.

by Vivek Athalye

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class='ele'>
<button class='trigger'>call .trigger</button>
<button class='triggerHandler'>call .triggerHandler</button>
<div class='output'></div>
</div>

JavaScript

$('.ele').on('myEvent', function(e) {
	return (typeof e.result === 'undefined'? '' : '_') + 'first handler';
})
$('.ele').on('myEvent', function(e) {
	output('displaying arguments to second handler');
	output(arguments);
	return e.result + '_second handler';
})

$('.trigger').click(function(e) {
	var ret = $('.ele').trigger('myEvent', 'called trigger');
	output('ret in trigger');
	output(ret);
})

$('.triggerHandler').click(function(e) {
	var ret = $('.ele').triggerHandler('myEvent', 'called triggerHandler');
	output('ret in triggerHandler');
	output(ret);
})

function output(ret) {
	console.log(ret);
	$('<pre>').text(JSON.stringify(ret, null, '  ')).appendTo('.output');
}