How jquery can trigger click event with additional parameter?

Question

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?

You may want to dig into the [source code](https://github.com/jquery/jquery/blob/main/src/event/trigger.js#:~:text=i%20%3D%200%3B-,while%20(%20(%20cur%20%3D%20eventPath%5B%20i%2B%2B%20%5D%20)%20%26%26%20!event.isPropagationStopped()%20)%20%7B,%7D,-event.type%20%3D%20type) if you have time. — Ricky Mo, Sep 17 '21 at 07:53
Don't know if this helps but here jQuery defines their own event and uses jQuery.extend to add properties if I'm understanding correctly: [jQuery source viewer: jQuery.Event](https://j11y.io/jquery/#v=2.1.3&fn=jQuery.Event) — Peter Krebs, Sep 17 '21 at 07:58
`jQuery.trigger` is a jQauery level method, which is going through all jQuery overhead before calling the native event handler. On the other hand, your example is just dispatching another event after the native event handler. — Ricky Mo, Sep 17 '21 at 07:58
At the end, your attempt is still triggering by a native "click" event, which you have no way to tamper with, while `jQuery.trigger` is doing everything (include accepting and processing extra parameters) on a higher level first. — Ricky Mo, Sep 17 '21 at 08:00
If you want to mimic `jQuery.trigger`, you should make your own version of `trigger`, which evetually dispatch a `click` event, instead of using a real click. — Ricky Mo, Sep 17 '21 at 08:02

score 0 · Answer 1 · answered Sep 17 '21 at 07:54

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();
});

And about jQuery implementation, i don't know if they still do it like this, but they implement their own event system (native javascript click event trigger both native and jquery event but jquery click event only trigger jquery one, not native) to make it transparent to you — ekans, Sep 17 '21 at 08:00

score 0 · Answer 2 · answered May 19 '23 at 06:51

A crude parameter stack, stored on the HTMLElement

Declare the prototype:

HTMLElement.prototype.clickParam = function(params) {
    // Pushes a parameter onto the stack
    if(!this.hasOwnProperty("_stack")) {
        this._stack = [];
    }
    this._stack.push(params);
    this.click();
}
HTMLElement.prototype.popParam = function() {
    // Takes the parameter off the stack and return the value
    if(!this.hasOwnProperty("_stack")) {
        this._stack = [];
    }
    return this._stack.pop();
}

Usage:

button.onclick = function(e) {
    console.log("Clicked!");
    console.log(e.srcElement.popParam());
}

button.clickParam({ first: 'john', last: 'doe'});
button.clickParam({ first: 'jane', last: 'doe'});

Output:

Clicked!
{first: 'john', last: 'doe'}
Clicked!
{first: 'jane', last: 'doe'}

... alternately, you could override HTMLElement.prototype.click to take the param, but this would introduce an anti-pattern.

Mahesh Thorat · Answer 3 · 2023-05-19T04:43:11.543

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));

$(document).ready(function () {
    function testFunction(num) {
        $('.my-output').html('Value ' + num);
    }

    $('.my-object').click(function () {
        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>

How jquery can trigger click event with additional parameter?

3 Answers3