JQuery trigger mousedown, зарегистрированный addEventListener

Я хочу моделировать фальшивое событие mousedown методом jQuery trigger(), и я регистрирую событие mousedown с помощью собственного метода javascript - addEventListener(). И я обнаружил, что это невозможно запустить...

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

Образец в jsFiddle

Я делаю некоторые тесты об этом.

  • Зарегистрировать событие mousedown jQuery on()
    • Результат: работает
  • Зарегистрировать щелчок событие addEventListener()
    • Результат: работает

Здесь что-то не так?

Спасибо.

P.S. Причина, почему использует addEventListener(), заключается в том, что я хочу написать библиотеку без jQuery.

Ответы

Ответ 1

Попробуйте использовать

EventTarget.dispatchEvent

Ссылка MDN

Ваш код будет чем-то вроде

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

elem.dispatchEvent(new Event('mousedown'))

Возможно, вам придется использовать fireEvent, если вы рассматриваете IE.

object.fireEvent(bstrEventName, pvarEventObject, pfCancelled)

Ссылка MSDN

Это было бы как

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

Ответ 2

Jquery Только запускает созданные события

Даже порядок также имеет значение, например: this Works

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

Но ниже код Будет не работать

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

Взгляните на это DEMO FIDDLE