JS властивість Event.isTrusted

Загальний опис

isTrusted – це властивість об’єкта Event у JavaScript, яка визначає, чи подія була ініційована користувачем (натисканням миші, натисканням клавіші тощо) або була створена скриптом. Це булеве значення: true, якщо подія була викликана дійсними діями користувача, та false, якщо подія була створена скриптом через методи на кшталт dispatchEvent, Event.initEvent, або ж аналогічними. Властивість isTrusted доступна для всіх об'єктів, які є підкласами Event, таких як MouseEvent, KeyboardEvent, тощо.

Коли відбувається подія, JavaScript автоматично передає в обробник подій об’єкт події, який містить деталі про те, як і де подія сталася. Наприклад, якщо користувач натискає кнопку, isTrusted буде дорівнювати true, а якщо ви викличете click подію на тій самій кнопці через код, isTrusted поверне false.

document.querySelector('button').addEventListener('click', (event) => {
  if (event.isTrusted) {
    console.log('Подія ініційована користувачем');
  } else {
    console.log('Подія створена скриптом');
  }
});

// Викличемо подію програмно
document.querySelector('button').click();

У цьому прикладі, коли користувач натискає кнопку, ви побачите повідомлення "Подія ініційована користувачем". Якщо ж подію викликати через button.click(), то виведеться "Подія створена скриптом".

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

правити

Порада

В деяких випадках можна використовувати isTrusted, щоб обмежити доступ до певних функцій. Наприклад, дозволяйте зберігати дані або надсилати форму тільки для "trusted" подій. Це може запобігти деяким типам автоматизації.

автор: Bond правити

Порада

Щоб відловлювати не лише "trusted" події, але й обробляти їх різними шляхами, створюйте умовні оператори, що відрізняють різні типи подій. Це дасть більше гнучкості в обробці.

автор: Bond правити

Порада

isTrusted – чудовий спосіб навчитися розрізняти автоматизацію та реальні події, особливо коли працюєте з функціями, які можуть бути легко зазнані спробам автоматизації, наприклад, кнопки "Зареєструватися" або "Придбати".

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.isTrusted

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	46	1.5	10	33	12	9

Підтримка: мобільні переглядачі

Переглядач
	46	46	4	10

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Event -> isTrusted</h2>
  <p class="description">Визначає, чи подія була ініційована користувачем.</p>
</header>
<main>
  <div class="result">
    <button id="trustedButton">Натисніть мене</button>
    <p id="message"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin-bottom: 15px;
}

#message {
  color: #444;
  font-weight: bold;
}

const button = document.getElementById('trustedButton');
const message = document.getElementById('message');

button.addEventListener('click', event => {
  if (event.isTrusted) {
    message.textContent = 'Кнопка натиснута справжнім користувачем!';
  } else {
    message.textContent = 'Цю подію було створено програмно!';
  }
});

// Виклик події програмно для демонстрації
setTimeout(() => {
  button.click(); // Викликає "programmatic" click
}, 2000);
//# sourceURL=pen.js

<form>
    <label>Ім'я: <input type="text" name="name"></label>
    <button type="submit">Надіслати</button>
</form>

document.querySelector('form').addEventListener('submit', (event) => {
  if (!event.isTrusted) {
    event.preventDefault();
    alert('Неможливо надіслати форму автоматично.');
  } else {
    console.log('Форма успішно надіслана');
  }
});

<div class="like-button">перший елемент like-button</div>
<div class="like-button">другий елемент like-button</div>

document.querySelector('.like-button').addEventListener('click', (event) => {
  if (!event.isTrusted) {
    console.log('Спроба накрутки лайків зупинена.');
  } else {
    event.target.classList.toggle('liked');
    console.log('Користувач натиснув "Подобається".');
  }
});