Пусть у нас есть ссылка:
<a href="">link</a>
Получим нашу ссылку в переменную:
let link = document.querySelector('a');
Привяжем к нашей ссылке обработчик клика. Отменим при этом переход по ссылке, чтобы избежать перезагрузки страницы:
link.addEventListener('click', function(event) {
console.log(this.textContent);
event.preventDefault();
});
Кажется, что мы полностью обезопасили себя от неожиданного поведения. На самом деле это не так. Дело в том, что при возникновении синтаксической ошибки JavaScript код просто не будет выполнен, блокировака ссылки не сработает, и осуществится переход по ней.
В этом случае мы не увидим ни результата выполнения кода, ни ошибки в консоли, ведь страница перезагрузится. Давайте специально сделаем ошибку в коде и убедимся на практике:
link.addEventListener('click', function(event) {
thiss.textContent = 'text'; // синтаксическая ошибка
event.preventDefault();
});
Такая проблема имеет характерный признак: если смотреть в консоль в момент клика на ссылку, мы на мгновение увидим красную ошибку в консоли, которая почти сразу же пропадет.
Конечно же, прочитать текст ошибки мы
не успеем, что существенно затрудняет
ее поиск. Есть, однако, хитрый прием. Нужно
в href ссыки поставить решетку.
В этом случае перехода по ссылке
не случится и мы увидим выброшенную
в консоль ошибку:
<a href="#">link</a>