Автоматизация клика по ссылке с помощью JavaScript

Быстрый ответ

Для симуляции кликового события используйте метод element.click(). К примеру, для элемента с определённым ID следующий код инициирует клик:

document.querySelector('#elementID').click();

Также, позволяется симулировать последовательность кликов с помощью цикла:

const element = document.querySelector('#elementID');
for (let i = 0; i < 5; i++) {
  element.click();
}

Прямой вызов обработчика событий

Если требуется прямой запуск обработчика события, такого как onclick, применяйте следующий подход:

const myElement = document.querySelector('#elementID');
if (myElement.onclick) myElement.onclick();

Учтите, что функция element.onclick() вызовется только при наличии у элемента соответствующего обработчика.

Кроссбраузерная совместимость и старый Internet Explorer

Для поддержки устаревших версий браузеров, в числе которых Internet Explorer (IE), используйте document.createEvent и initEvent:

var event;
if (typeof(Event) === 'function') {
  event = new Event('click');
} else {
  event = document.createEvent('Event');
  event.initEvent('click', true, true);
}
document.querySelector('#elementID').dispatchEvent(event);

В Internet Explorer применяется метод fireEvent:

const element = document.getElementById('elementID');
element.fireEvent('onclick');

Обязательно проверьте доступность fireEvent, так как этот метод устарел и недоступен в большинстве современных браузеров.

Собственное событие — собственные правила: создание кастомных событий

Для создания пользовательских событий используйте dispatchEvent совместно с CustomEvent:

const element = document.querySelector('#elementID');
const event = new CustomEvent('my-custom-event', { detail: { ... } });
element.dispatchEvent(event);

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

Использование синтетического клика

Возможно, вы захотите иметь возможность различать программные клики от пользовательских:

const event = new Event('click', { 'bubbles': true, 'cancelable': true });
event.synthetic = true;
element.dispatchEvent(event);

Взаимодействие со скриптами из разных окон: использование OwnerDocument

Для работы с элементами в других окнах или фреймах используйте свойство ownerDocument:

let element = someNode.ownerDocument.querySelector('#elementID');
element.click();

Этот метод позволяет корректно взаимодействовать с элементом в его исходном контексте.

Особенности инициирования событий

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

Визуализация

Можно представить себе цепь из домино – каждая домино символизирует действие, приводящее к конечному результату:

dominoEvent.trigger('click');

Вот что получается:

До: 🀄️🀄️🀄️🛑🐭
После: 🀄️🀄️🀄️💥🐭

Срабатывание домино – это аналогия для последовательности действий, вызываемых кликом в JavaScript.

Выбор класса событий

При использовании document.createEvent выбирайте подходящий eventClass. Для событий мыши это MouseEvents:

const event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window);
element.dispatchEvent(event);

Учет платформенных особенностей

Особенно при тестировании платформозависимых особенностей, убедитесь, что ваш код для симуляции событий работает корректно, например, в мобильных браузерах на Android.

Реальные клики против программных: узнайте подделку

Помните, что программно созданный "клик" не эквивалентен настоящему пользовательскому клику. Ваши обработчики могут реагировать по-разному, особенно если они проверяют свойство isTrusted события.

Мастерство симуляции взаимодействий пользователя

Владение приемами имитации кликов важно для написания автоматизированных тестов. Библиотеки, такие как Jest или Cypress, позволяют тестировать пользовательский интерфейс веб-приложения.

Полезные материалы

1. Element: click event – Web APIs | MDN — Документация по кликовым событиям.
2. Introduction to Events — Введение в события JavaScript.
3. How to simulate a click with JavaScript? – Stack Overflow — Обсуждение методов симуляции кликов.
4. How To Trigger Button Click on Enter – Метод инициирования клика при нажатии на клавишу Enter.
5. .trigger() | jQuery API Documentation — Документация jQuery по работе со событиями.
6. Creating and triggering events – Event reference | MDN — Руководство по созданию и инициированию событий.
7. How to trigger event in JavaScript? – Stack Overflow — Обзор различных методов инициирования событий.