In jquery you can easily do this using something like:
//to trigger click with params
jQuery(domElement).trigger( 'click', [ additionalParameters ] );
//to listen click the params
jQuery( domElement ).on( 'click', function( event, parameters ) {
event.stopImmediatePropagation();
}
How to do this using pure javascript?
We can't use 'new CustomEvent' because it doesnt accept 'click' as event. We cant use 'new MouseEvent' because unlike 'CustomEvent' it doesnt have ability to pass parameters.
We can use something like this:
//to trigger click with params
domElement.addEventListener("click", function(e) {
var event = new CustomEvent("fakeClick", {'detail': {
custom_info: 10,
custom_property: 20
}});
this.dispatchEvent(event);
});
//to listen click the params
domElement.addEventListener('fakeClick', function(event) {
var parameters = event.detail;
event.stopImmediatePropagation();
});
But we cant use 'stopImmediatePropagation' because it will only affect our 'fakeClick' event. As we want it to affect 'click'.
How jQuery can do this? There should be a way to do this using pure javascript.
Edit: some random guy mentioning about other thread, which is unrelated. I'm asking about how jquery do this. Here's what he mentioned: => How to pass arguments to addEventListener listener function?
On your fakeClick event, on additionnal parameter send original event too and apply stopImmediatePropagation on it :
//to trigger click with params
domElement.addEventListener("click", function(e) {
var event = new CustomEvent("fakeClick", {'detail': {
custom_info: 10,
custom_property: 20,
originalEvent: e
}});
this.dispatchEvent(event);
});
//to listen click the params
domElement.addEventListener('fakeClick', function(event) {
var parameters = event.detail;
var clickEvent = parameters.originalEvent;
event.stopImmediatePropagation();
clickEvent.stopImmediatePropagation();
});
Hello please check below code.
Your function
function testFunction(num)
{
$('.my-output').html('Value'+num);
}
Add event to parametner
<div class="my-object">Click Here</div>
<div class="my-output"></div>
Execute Event
$('.my-object').trigger(testFunction(123));
function testFunction(num)
{
$('.my-output').html('Value'+num);
}
$('.my-object').trigger(testFunction(123));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-object">Click Here</div>
<div class="my-output"></div>