Дії браузера за замовчуванням

Багато подій автоматично тягнуть за собою дію браузера.

• Клік по посиланню ініціює перехід на новий URL.
• Натискання на кнопку «відправити» в формі - відсилання її на сервер.
• Подвійний клік на тексті - ініціює його виділення.

Є два способи скасувати дію браузера:

• Основний спосіб - це скористатися об'єктом події. Для скасування дії браузера існує стандартний метод event.preventDefault ().
• Якщо ж обробник призначений через onсобитіе (не через addEventListener), то можна просто повернути false з обробника.

У наступному прикладі при кліці по посиланню перехід не відбудеться:

Повертати true не потрібно

Зазвичай значення, яке повертає обробник події, ігнорується.

Єдиний виняток - це return false з обробника, призначеного через onсобитіе.

Іноді в коді початківців розробників можна побачити return інших значень. Але вони не потрібні і ніяк не обробляються.

Даний приклад за допомогою CSS може виводитися так:

Наприклад, ось так:

Так як ми застосували делегування, то меню може збільшуватися, можна додати вкладені списки ul / li. стилізувати їх за допомогою CSS - обробник не зажадає змін.

Дій браузера за замовчуванням досить багато.

Ось деякі приклади подій, які викликають дію браузера:

• mousedown - натискання кнопкою миші в той час як курсор знаходиться на тексті починає його виділення.
• click на - ставить або прибирає галочку.
• submit - при натисканні на в формі дані відправляються на сервер.
• wheel - рух коліщатка миші ініціює прокрутку.
• keydown - при натисканні клавіші в поле вводу з'являється символ.
• contextmenu - при правому кліку показується контекстне меню браузера.
• ...

Події можуть бути пов'язані між собою

Деякі події природним чином випливають одне з одного.

Наприклад, натискання мишкою mousedown на поле введення призводить до фокусуванні всередину нього. Якщо скасувати дію mousedown. то і фокуса не буде.

Спробуйте натиснути мишкою на перший - відбудеться подія onfocus. Це звичайна ситуація.

Але якщо натиснути на другий, то фокусування не відбудеться.

Зробіть так, щоб при кліці на посилання всередині елемента #contents користувачеві виводився питання про те, чи дійсно він хоче покинути сторінку і якщо він не хоче, то переривати перехід по посиланню.

Так це повинно працювати:

• Вміст #contents може бути завантажено динамічно і присвоєно за допомогою innerHTML. Так що знайти всі посилання і поставити на них обробники не можна. Використовуйте делегування.
• Вміст може містити вкладені теги, в тому числі всередині посилань. наприклад, . .

Це - класична задача на тему делегування.

У реальному житті, ми можемо перехопити подія і створити AJAX-запит до сервера, який збереже інформацію про те, з якої посиланням пішов відвідувач.

Ми перехоплюємо подія на contents і піднімаємося до parentNode поки не отримаємо A або не зайдемо в контейнер.