Как переписать jQuery-код на Vanilla JS?

Question

[Игорь]

Как переписать этот jQuery-код на vanilla js?

$(document).on("af_complete", function(event, response) {
    if (response.success) {
        grecaptchaExecute();
    }
});

Вот так почему то не срабатывает:

document.addEventListener("af_complete", function(event, response) {
    if (response.success) {
        grecaptchaExecute();
    }
})

Comments

[Андрей Саныч]

сравнивали event и response в обеих случаях? response в первом коде такой же как и во втором?

[shmatuan]

"Регистрирует нужные скрипты на фронтенде: jQuery.Form и jQuery.jGrowl."
Тоесть он работает с jQuery, зачем тогда ванила?

[Игорь]

Андрей Саныч, Вот: https://github.com/bezumkin/AjaxForm/blob/master/a...

[Дмитрий Беляев]

Во-первых, колбэк натвиного события получает только 1 аргумент - event, полезные данные можно положить в event.data
Во-вторых, так как это кастомное событие, код который его dispatch'ит должен это делать через натвиный DOM-api, а не через jQuery, иначе не заработает

[Игорь]

shmatuan, Дело в том, что я разрабатываю компонент на основе Google reCAPTCHA v3 и jQuery-код, который ее инициализирует скорее всего будет размещен до инициализации самого jQuery у большинства людей. Не хотелось бы ради небольшого куска кода привязываться к Fenom или включать в компонент дополнительный сниппет, который будет регистрировать скрипты в конце страницы. Если это возможно, конечно)

Компонент для MODX, если что.

Answer 1

[alex]

Не работает, потому что в первом случае вы слушаете jquery-событие, а во втором - нативное событие, а jquery не может тригерить нативные события. чтобы второй вариант работал, событие нужно тригерить вот так:

document.dispatchEvent(new CustomEvent('af_complete;))

но т.к. судя по всему вы не можете изменить исходники modx, то остается использовать только первый вариант

Comments

[Игорь]

Понятно, спасибо за развернутый ответ!

[Никита Егоров]

Игорь, если ответ помог, его отмечают решением.

Answer 2

[Владимир Проскурин]

Это кастомное событие, созданное специально под jQuery. Полагаю, это из модуля AjaxForm из ModX. Нет смысла писать это на ваниле, т.к. jQuery все равно уже используется на сайте.

Comments

[Игорь]

Да, все верно, для MODX. Вот тут написал, почему Как переписать jQuery-код на Vanilla JS?