Jquery Trigger Mousedown Registered By Addeventlistener

I want to simulate fake mousedown event by jQuery trigger() method, and I register mousedown event by native javascript method - addEventListener(). And I found it can't be trigge

Solution 1:

Try using

EventTarget.dispatchEvent

MDN link

Your code will be something like

var elem = document.getElementById('square');
elem.addEventListener('mousedown', function () {
    alert('addEventListener');
});
$(elem).on('mousedown', function () {
    alert('on');
});

elem.dispatchEvent(newEvent('mousedown'))

You might have to use fireEvent if you are considering IE.

object.fireEvent(bstrEventName, pvarEventObject, pfCancelled) 

MSDN link

It would be like

if (document.createEvent) {
    element.dispatchEvent(event);
} else {
    element.fireEvent("on" + event.eventType, event);
}

Solution 2:

Jquery Only triggers the events that created by itself

Even the order is also matters like : this Works

$(elem).on('mousedown', function () {
    alert('on');
});
$(elem).trigger('mousedown');

But Below code Will not Work

 $(elem).trigger('mousedown');
 $(elem).on('mousedown', function () {
    alert('on');
});

Take A look at This DEMO FIDDLE