каков эквивалент метода 'trigger' в jquery без jquery?

#javascript #jquery

Вопрос:

каков эквивалент метода jQuery trigger без jQuery?

например, как мне сделать что-то подобное $('.blah').trigger('click'); без jQuery?

Ответ №1:

событие.initMouseEvent («щелчок»…

Вот пример:

 function simulateClick(elId) {
    var evt;
    var el = document.getElementById(elId);
    if (document.createEvent) {
        evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    (evt) ? el.dispatchEvent(evt) : (el.click amp;amp; el.click());
}

var foo = document.getElementById("hey");

foo.onclick = function () {alert("bar");}

simulateClick("hey");

Ответ №2:

Для некоторого значения «очень дрянной эквивалент»:

 var button = document.getElementById("thebutton")
button.click()

Не все браузеры (например, Firefox!) допускают имитацию событий таким образом! Использование onclick() работает только в том случае, если событие является встроенным и т.д.

Пожалуйста, посмотрите исходный код jQuery и найдите «trigger:» (первое совпадение), чтобы увидеть все неприятные вещи, сделанные для того, чтобы «заставить это работать» (значительная часть этого просто копается во внутренних компонентах jQuery, в других фреймворках есть гораздо более простые примеры).

Удачного кодирования.

1. Это не эквивалент метода jQuery .trigger() . Как насчет других событий? например, resize , scroll hashchange . Как насчет пользовательских событий? Это даже не работает в кроссбраузерном режиме.

2. Это поддерживается начиная с Firefox 5 в соответствии с MDN.

3. Также следует отметить, что вызов click() не запускает зарегистрированных прослушивателей событий.

Ответ №3:

в Javascript

 var event = document.createEvent("Event");
event.initEvent("click", false, true); 
document.getElementById("blah").dispatchEvent(event);

эквивалентен для jQuery trigger, как показано ниже

 $('#blah').trigger('click');

Ответ №4:

Вот мой пример. Работает идеально во всех ситуациях

 var d=document.createEvent("MouseEvents"),
    c=document.createEvent("MouseEvents"),
    p=document.createEvent("MouseEvents");
    d.initMouseEvent("mousedown",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
    c.initMouseEvent("click"    ,true,true,window,0,0,0,0,0,false,false,false,false,0,null);
    p.initMouseEvent("mouseup"  ,true,true,window,0,0,0,0,0,false,false,false,false,0,null);

    var element =// some selector;

    element.dispatchEvent(d);
    element.dispatchEvent(c);
    element.dispatchEvent(p);

Ответ №5:

TL; DR: создайте объект Event и передайте его в element.dispatchEvent(событие)

 function simulateClick() {
  const event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  const element = document.getElementById('checkbox');
  element.dispatchEvent(event);
}

Дополнительная информация https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events#triggering_built-in_events