JS властивість Event.error
Загальний опис
Подія error виникає, коли елемент не може завантажити ресурс, такий як зображення, скрипт, стиль або медіафайл, або при виникненні інших помилок під час виконання цих елементів. Наприклад, якщо файл зображення не завантажується через неправильний шлях, відсутність ресурсу або помилку на сервері, подія error спрацює і можна обробити її відповідно до потреб.
Подію error можна використовувати з різними HTML-елементами, наприклад, зображеннями, відео або аудіо. Також вона корисна для динамічно завантажених елементів або запитів до серверів, щоб дати змогу розробнику відповідно реагувати на виникнення помилок, наприклад, показувати резервне зображення або повідомлення користувачу.
Для обробки помилок необхідно додати обробник події за допомогою методу addEventListener. Наприклад, для обробки помилок завантаження зображення можна зробити наступне:
const img = document.querySelector('img');
img.addEventListener('error', function() {
img.src = 'fallback.jpg'; // Завантажує резервне зображення
});
У цьому прикладі, якщо зображення не завантажується, воно автоматично замінюється на резервне зображення. Подібним чином можна реагувати на помилки під час завантаження аудіо або відео, або навіть виконання скриптів.
Важливо, що для деяких елементів, таких як window, подія error надає доступ до інформації про помилку, зокрема до повідомлення, URL файлу та номера рядка, де виникла помилка. Це допомагає більш точно діагностувати проблеми і реагувати на них.
Подію error також можна використовувати для відстеження помилок виконання запитів, таких як помилки HTTP-запитів або несправності у взаємодії з API. В такому випадку ви можете відправляти сповіщення або реєструвати інформацію для подальшого аналізу помилок.
| Порада: | Оскільки подія |
| Порада: | При роботі з подією |
| Порада: | Для відео- або аудіофайлів можна використовувати подію |
Синтаксис
element.addEventListener('error', function(event) {
// Обробка помилки
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач бачить кнопку для повторної спроби завантаження зображення. Якщо зображення не може бути завантажене через помилку (наприклад, неправильний URL), подія error спрацьовує, і зображення замінюється на резервне. Також змінюється текст повідомлення для користувача, інформуючи його про помилку та завантаження альтернативного зображення. Користувач може знову натиснути на кнопку для повторної спроби завантаження.
У цьому прикладі, якщо зображення не завантажується, воно автоматично замінюється на резервне, що дозволяє уникнути порушення дизайну сторінки. Це корисно для відображення візуального контенту, коли ресурс недоступний.
const img = document.querySelector('img');
img.addEventListener('error', function() {
img.src = 'https://via.placeholder.com/150'; // Завантажуємо резервне зображення
console.log('Помилка завантаження зображення, показано резервне');
});У цьому прикладі обробляються помилки JavaScript, що виникають на сторінці. Це дозволяє швидко діагностувати і відстежувати помилки в коді, включаючи їхнє місце виникнення, що може бути корисним для налагодження і підтримки додатків.
window.addEventListener('error', function(event) {
console.error('Помилка в JavaScript:', event.message);
console.log('Файл:', event.filename, 'Рядок:', event.lineno);
});