Page 133 - 6108
P. 133
> keyup
Дії браузера за замовчуванням
Багато подій автоматично тягнуть за собою дію браузера, наприклад:
– клік по посиланню ініціює перехід на новий URL.
– подвійний клік на тексті – ініціює його виділення.
– mousedown - натискання кнопкою миші в той час як курсор
знаходиться на тексті починає його виділення.
– click на <input type = "checkbox"> – ставить або прибирає
галочку.
– submit – при натисканні на <input type = "submit"> в формі
дані відправляються на сервер.
– wheel – рух коліщатка миші ініціює прокрутку.
– keydown – при натисканні клавіші в поле вводу з'являється символ.
– contextmenu – при правому кліку показується контекстне меню
браузера, і т.п.
Якщо така подія обробляється в JavaScript, то найчастіше така дія
браузера не потрібна. На щастя, її можна скасувати.Є два способи скасувати
дію браузера:
Основний спосіб – це скористатися об'єктом події. Для скасування дії
браузера існує стандартний метод event.preventDefault().
<form>
<label for="id-checkbox">Чекбох:</label>
<input type="checkbox" id="id-checkbox"/>
</form>
document.querySelector("#id-
checkbox").addEventListener("click", (event) => {
console.log("Ви не можете вибрати цей чекбокс");
event.preventDefault(); // відміна типової дії при кліску
на чекбокс
}, false);
Якщо ж обробник призначений через on<подія> (не через
addEventListener), то можна просто повернути false з обробника.
<a href="/" onclick="return false">Натисни тут</a>
3.5.8 Робота з формами
В JavaScript форма представлена об'єктом HtmlFormElement. І після
створення форми ми можемо до неї звернутися різними способами.
<form name="search"> </form>
let searchForm = document.search;
Другий спосіб полягає в зверненні до колекції форм документа
document.forms і пошуку в ній потрібної форми.
document.forms – повертає масив HTMLFormElement об’єктів, що
представляють всі форми сторінки.
document.forms[index] – повертає HTMLFormElement об’єкт за
вказаним індексом.