Запуск события

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

Например, чтобы вызвать событие click на любом элементе, вы используете метод click():

el.click();
Code language: CSS (css)

Элементы ввода текста и текстовой области предоставляют методы focus() и blur() для запуска событий focus и blur:

el.focus(); el.blur();
Code language: CSS (css)

Элемент формы имеет методы submit() и reset() для запуска событий submit и reset:

const frm = document.querySelector('form'); // trigger the submit event frm.submit(); // trigger the reset event frm.reset();
Code language: JavaScript (javascript)

Для запуска других событий, таких как mousedown или change, вы используете следующую вспомогательную функцию triggerEvent():

function triggerEvent(el, type) { // IE9+ and other modern browsers if ('createEvent' in document) { var e = document.createEvent('HTMLEvents'); e.initEvent(type, false, true); el.dispatchEvent(e); } else { // IE8 var e = document.createEventObject(); e.eventType = type; el.fireEvent('on' + e.eventType, e); } }
Code language: JavaScript (javascript)

Предположим, что у вас есть текст для ввода:

<input type="text" name="username">
Code language: HTML, XML (xml)

Следующая функция привязывает обработчик события к событию click:

const input = document.querySelector('input[type="text"]'); input.addEventListener('change', (e) => { console.log('Input changed'); });
Code language: JavaScript (javascript)

Чтобы вызвать событие change, вы используете функцию triggerEvent() следующим образом:

triggerEvent(input, 'change');
Code language: JavaScript (javascript)

Оцените статью
devanswers.ru
Добавить комментарий