Как запустить событие в JavaScript?

Если вы используете jQuery, вы можете просто сделать следующее:

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

А затем обработать это событие так:

$('#yourElement').on('customEventName', function (objectEvent, [arg0, arg1, ..., argN]) {
    alert("customEventName");
});

Здесь "[arg0, arg1, ..., argN]" означает, что эти аргументы являются необязательными.

Принятое решение не сработало для меня, и ни один из вариантов с createEvent тоже не помог.

В итоге, что сработало для меня:

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

Вот пример кода:

const clickBtn = document.querySelector('.clickme');
const viaBtn = document.querySelector('.viame');

viaBtn.addEventListener('click', function(event) {
    clickBtn.dispatchEvent(
        new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

clickBtn.addEventListener('click', function(event) {
    console.warn(`Я был активирован через другую кнопку! Событие типа ${event.type} произошло!`);
});

<button class="clickme">Нажми меня</button>
<button class="viame">Нажми через меня</button>

Ссылку на прочтение: MouseEvent - MDN

Вот альтернативное решение, которое не требует ручного вызова события слушателя:

Что бы ни делал ваш слушатель событий, переместите это в отдельную функцию и вызывайте эту функцию из слушателя событий.

Таким образом, вы также сможете вызывать эту функцию в любом другом месте, где вам нужно выполнить ту же задачу, которую выполняет событие при его срабатывании.

Я считаю такой подход менее «нагрузочным» и более читаемым.

В данном случае можно использовать следующий подход, который оказывается гораздо проще:

element.blur();
element.focus();

При этом событие срабатывает только в том случае, если значение действительно было изменено, так же как если бы оно было изменено пользователем при потере фокуса.

Чтобы создать функцию, которая инициирует событие мыши в JavaScript, вы можете использовать следующий код:

function fireMouseEvent(obj, evtName) {
    if (obj.dispatchEvent) {
        // Создаем событие типа MouseEvent
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(evtName, true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
        obj.dispatchEvent(event);
    } else if (obj.fireEvent) {
        // Для старых версий IE
        var event = document.createEventObject();
        event.button = 1; // Обычно используется для кликов мыши
        obj.fireEvent("on" + evtName, event);
        obj.fireEvent(evtName);
    } else {
        // В случае, если объект не поддерживает события
        obj[evtName]();
    }
}

// Получаем элемент по его ID и вызываем событие клика
var obj = document.getElementById("......");
fireMouseEvent(obj, "click");

Объяснение:

1. dispatchEvent: Этот метод используется для распространения событий, генерируемых объектом.
2. createEvent и initMouseEvent: Эти функции применяются для создания и инициализации событий мыши.
3. fireEvent: Используется в старых версиях IE для требования событий.
4. Простой вызов метода: Если объект не поддерживает события, функция просто вызывает метод с именем события.

Таким образом, вы можете вызвать событие клика, передав элемент и имя события в функцию. Не забудьте заменить ...... на фактический ID элемента, с которым вы хотите работать.