jQuery trigger mousedown registered by addEventListener

Question

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 triggered...

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

Sample in jsFiddle

I do some tests about it.

1. Register mousedown event by jQuery on()
   • Result: works
2. Register click event by addEventListener()
   • Result: works

Is anything wrong here?

Thanks.

P.S. The reason why uses addEventListener() is that I want to write a library without jQuery.

Answer 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(new Event('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);
}

Answer 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