Користувацькі події JavaScript в Esl

Esl пропонує ряд користувацьких подій JavaScript, які ви можете використовувати для розширення функціональності та інтерактивності вашого веб-сайту. Ці події дозволяють вам реагувати на специфічні дії або зміни на вашому сайті, керованому Esl. Давайте розглянемо доступні в Esl користувацькі події:

Події елементів форм

  • esl/form/submit Випускається перед виконанням AJAX виклику для відправки форми.
  • esl/form/success Випускається після того, як AJAX виклик успішно завершив відправку форми.
  • esl/form/error Випускається після виникнення помилки в AJAX виклику при відправці форми.

Події елементів вкладок / Вкладки (вкладені)

  • esl/tabs/changed: Випускається після натискання на назву вкладки (@since 1.9.8)
// Слухати подію 'esl/tabs/changed'document.addEventListener('esl/tabs/changed', (event) => {// Витягти інформацію з деталі подіїconst { elementId, activeIndex, activeTitle, activePane } = event.detail;// Тільки цільовий elementID lwxvfhif( elementId !== 'lwxvfh' ) {return;}// Приклад: Логувати деталі в консоліconsole.log(`Вкладки змінені - ID елемента: ${elementId}, Активний індекс: ${activeIndex}, Активна назва: ${activeTitle}, Активна панель: ${activePane}`);// Ваша користувацька логіка тут// Наприклад, оновити UI на основі зміни вкладки});

Події елементів акордеонів / Акордеони (вкладені)

  • esl/accordion/open: Випускається після відкриття/розгортання акордеону через дію натискання (@since 1.9.8)
  • esl/accordion/close: Випускається після закриття/згортання акордеону через дію натискання (@since 1.9.8)
// Слухати подію 'esl/accordion/open'document.addEventListener('esl/accordion/open', (event) => {// Витягти інформацію з деталі подіїconst { elementId, openItem } = event.detail;// Тільки цільовий elementID qwe3thif( elementId !== 'qwe3th' ) {return;}// Приклад: Логувати деталі в консоліconsole.log(`Акордеон відкрито - ID елемента: ${elementId}, ID відкритого елемента: ${openItem}`);// Ваша користувацька логіка тут// Наприклад, оновити UI на основі відкритого елемента акордеону});
// Слухайте подію 'esl/accordion/close'document.addEventListener('esl/accordion/close', (event) => {// Витягніть інформацію з деталей подіїconst { elementId, closeItem } = event.detail;// Націлюйтеся лише на elementID qwe3thif( elementId !== 'qwe3th' ) {return;}// Приклад: виведіть деталі в консольconsole.log(`Accordion Closed - Element ID: ${elementId}, Closed Item ID: ${closeItem}`);// Ваша настройка логіки тут// Наприклад, оновіть інтерфейс користувача на основі закритого элемента акордеона});

Події анімації

  • esl/animation/end/{animationId}: Випускається, коли вказана анімація (ідентифікована {animationId}) закінчує відтворення.

Події спливаючих вікон

  • esl/popup/open: Випускається після відкриття спливаючого вікна.
  • esl/popup/close: Випускається після закриття спливаючого вікна.
  • esl/ajax/popup/start: Випускається перед викликом AJAX спливаючого вікна.
  • esl/ajax/popup/end: Випускається після завершення виклику AJAX спливаючого вікна.
  • esl/ajax/popup/loaded: Випускається після додавання вмісту AJAX спливаючого вікна до DOM.

Послідовність подій відкриття AJAX спливаючого вікна

  1. esl/ajax/popup/start
  2. esl/ajax/popup/end
  3. esl/ajax/popup/loaded
  4. esl/popup/open

Події Esl AJAX

Esl AJAX = Безкінечний прокрутка, Завантажити більше, AJAX Сторінка, або Фільтр запитів.

  • esl/ajax/start: Випускається перед виконанням AJAX виклику Esl.
  • esl/ajax/end: Випускається після завершення AJAX виклику Esl.
  • esl/ajax/pagination/completed: Випускається після завершення виклику пагінації AJAX.
  • esl/ajax/load_page/completed: Випускається після завершення виклику AJAX для безкінечної прокрутки.
  • esl/ajax/query_result/completed: Випускається після завершення виклику фільтра запиту AJAX.
  • esl/ajax/query_result/displayed: Випускається після додавання всіх відфільтрованих результатів до DOM.

Послідовність подій безкінечної прокрутки

  1. esl/ajax/start
  2. esl/ajax/end
  3. esl/ajax/load_page/completed

Послідовність подій пагінації AJAX

  1. esl/ajax/start
  2. esl/ajax/end
  3. esl/ajax/pagination/completed

Послідовність подій фільтра AJAX

  1. esl/ajax/start
  2. esl/ajax/end
  3. esl/ajax/query_result/completed
  4. esl/ajax/query_result/displayed
document.addEventListener('esl/ajax/start', (event) => {// Отримайте queryId з подіїconst queryId = event.detail.queryId || false;if (!queryId) {return;}// Ваша власна логіка тут// Наприклад, ініціюйте завантажувач або оновіть UI, щоб вказати на початок AJAX запиту});

document.addEventListener('esl/ajax/end', (event) => {// Отримайте queryId з подіїconst queryId = event.detail.queryId || false;if (!queryId) {return;}// Ваша власна логіка тут// Наприклад, ініціюйте завантажувач або оновіть UI, щоб вказати на завершення AJAX запиту});

document.addEventListener('esl/ajax/pagination/completed', (event) => {// Витягніть queryId з деталей подіїconst queryId = event.detail.queryId;// Ваша власна логіка тут// Наприклад, обробіть завершену пагінацію для конкретного queryId});

document.addEventListener('esl/ajax/load_page/completed', (event) => {// Витягніть інформацію з деталей подіїconst { queryTrailElement, queryId } = event.detail;// Ваша власна логіка тут// Наприклад, обробіть завершене завантаження AJAX сторінки для конкретного queryId та queryTrailElement});

document.addEventListener('esl/ajax/query_result/completed', (event) => {// Отримати інформацію з деталей подіїconst queryId = event.detail.queryId;// Ваша власна логіка тут});

document.addEventListener('esl/ajax/query_result/displayed', (event) => {// Отримати інформацію з деталей подіїconst queryId = event.detail.queryId;// Ваша власна логіка тут});