Вы находитесь на странице: 1из 35

JS

Основы JavaScript
События браузера
Повторим?
А есть выбор? :)
Какое свойство предоставляет интерфейс
работы со списком классов?
Какое свойство предоставляет интерфейс
работы со списком классов?

.classList
Какие методы имеет свойство .classList?
Какие методы имеет свойство .classList?
1. .add(‘class’) - добавление класса class в список классов.
2. .remove(‘class’) - удаление класса class из списка.
3. .toggle(‘class’) - переключает состояние класса class (удаляет,
если такой класс есть в списке, добавляет, если нет).
4. .contains(‘class’) - проверяет, есть ли class в списке, если да,
возвращает true, иначе - false.
Как привязать обработчик “клика” к эл-ту?
Как привязать обработчик “клика” к эл-ту?

элемент.addEventListener(‘click’, function(){
// код, который выполнится
// при клике на элементе
});

Не забываем про скобочки!!!


Какие типы эл-та input мы изучили?
Какие типы эл-та input мы изучили?

Элементы формы Внешний вид <input type=”...”>


Текстовое поле text
Числовое поле number
Чекбокс checkbox
Радиокнопка radio
Какое свойство позволяет получить значение
текстового или числового поля?
Какое свойство позволяет получить значение
текстового или числового поля?

.value
Какое свойство позволяет получить состояние
чекбокса или радиокнопки?
Какое свойство позволяет получить состояние
чекбокса или радиокнопки?

.checked
Какое свойство позволяет получить/изменить
текст кнопки (<button>) ?
Какое свойство позволяет получить/изменить
текст кнопки (<button>) ?

.innerHTML
События браузера
Определение, основные события.
Что такое событие?
Событие в JavaScript - это сигнал от браузера о том,
что что-то произошло (действия пользователя, загрузка
страницы и т.п.)

Именно механизм событий позволяет делать веб-


страницы интерактивными и создавать полноценные
приложения в рамках вашего сайта!
События мыши
1. click – возникает при клике на элементе левой кнопкой мыши
2. contextmenu – при клике правой кнопкой мыши
3. mousedown – когда кнопку мыши нажали
4. mouseup – когда кнопку мыши отпустили
5. mousemove – при движении мыши
6. mouseover – возникает, когда на элемент наводится мышь
7. mouseout – возникает, курсор покидает элемент
Важно!
Все события в JS пишутся
строчными (маленькими) буквами.
Кажется, мы это уже умеем?
Да, мы уже научились привязывать обработчик события click, это выглядело
так:

элемент.addEventListener(‘click’, function(){
// код, который выполнится
// при клике на элементе
});
Не забываем про скобочки!!!
Как обработать другие события?
Точно так же! :)

Название события

элемент.addEventListener(‘...’, function(){
// код, который выполнится
// при возникновении события
});
Старый способ
Обработчик может быть назначен прямо в разметке, в атрибуте, который
называется on<событие>

Например, чтобы прикрепить click-событие к input кнопке, можно присвоить


обработчик onclick, вот так:
Старый способ
Можно назначать обработчик, используя свойство DOM-элемента
on<событие>.

Пример установки обработчика click:


Проблемы старого способа
1. Невозможность повесить несколько обработчиков на
одно событие
2. Есть некоторые события, которые нельзя назначить
через DOM-свойство, но можно через addEventListener
(например transitionend)
3. Смешивание HTML и JS (принцип разделения
ответственности)
Вывод!
Всегда используем
.addEventListener
Решаем первую порцию задачек
Объект события
Получаем детали событий.
События клавиатуры
Прежде, чем мы начнем разговор об объекте события, рассмотрим
следующие события клавиатуры:

1. keydown – возникает, когда посетитель нажимает клавишу


2. keyup – возникает, когда посетитель отпускает клавишу
Объект события
Иногда чтобы обработать событие, недостаточно знать о том, что это –
«клик» или «нажатие клавиши». Могут понадобиться детали: координаты
курсора, введённый символ и другие, в зависимости от события.

Детали произошедшего браузер записывает в «объект события», который


передаётся первым аргументом в обработчик.
Передача объекта события

элемент.addEventListener(‘click’, function(e){
// здесь к объекту события можно
// обратиться через переменную e
});

Переменная, в которой будет


существовать объект события
Свойства объекта события
1. .type - тип события (click, mouseover и т.п.)
2. .currentTarget - элемент, на котором сработал обработчик
3. .clientX /.clientY - координаты возникновения события

При событиях клавиатуры:

1. .key - значение клавиши, на которой возникло событие.


2. .keyCode - числовой код клавиши, на которой возникло событие.
Пример

elem.addEventListener(‘click’, function(e) {
// вывести тип события, элемент и координаты клика
alert(e.type + " на " + e.currentTarget);
alert(e.clientX + ":" + e.clientY);
}
Отмена стандартного действия
Для некоторых событий в браузерах предусмотрено стандартное действие,
например, переход при клике по ссылке или контекстное меню при правом
клике.

Это действие можно отменить так:

elem.addEventListener(‘click’, function(e) {
// вывести тип события, элемент и координаты клика
e.preventDefault();
}
Объект document
document - глобальный объект документа, корень
объектной модели.

Может быть использован, чтобы “отлавливать” события,


возникшие в документе, а не на каком-то конкретном
элементе.