Стандартные события в JavaScript
onload - срабатывает, когда объект загрузился.
Если поставить событие onload на картинку, то onload сработает, когда картинка загружена.
Данное событие можно использовать, для того, чтобы получить возможность размещать JavaScript до body.
<script>
function func() {
alert('Страница загружена');
}
</script>
<body onload="func()">
</body>
onscroll - срабатывает при скролинге внутри элемента. Если нас интересует скроллинг внутри страницы, то это будет body
document.body.onscroll = scroller;
function scroller() {
alert('Ура, я умею скроллировать!');
}
Смещение скроллинга относительно верха сайта
Чтобы получить текущее смещение экрана от верха сайта используем свойство window.pageYOffset
Получение позиции элемента относительно верха сайта
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
Размеры окна
var w = window.innerWidth;
var h = window.innerHeight;
onkeypress, onkeydown,onkeyup - события для работы с клавиатурой
onkeydown - срабатывает, когда нажата клавиша.
onkeyup - когда она отпущена
onkeypress - когда напечатан символ
Допустим мы хотим перехватить нажатие клавишы "стрелочка вверх". Тогда можно воспользоваться следующим кодом.
<html>
<head>
<script>
function func(event) {
if (event.keyCode=='38') {
console.log('Нажата клавиша вверх');
}
}
window.addEventListener('keydown', func, false);
</script>
</head>
<body>
</body>
</html>
Получение нажатого символа по коду
String.fromCharCode(evt.keyCode)
onchange - происходит, когда меняется значение элемента.
Например, когда у нас есть select-option элемент и мы выбираем у него какое-то другое значение
<select class="choose">
<option value="Одесса">Одесса
<option value="Амстердам">Амстердам
<option value="Сан-Франциско">Сан-Франциско
</select>
<script>
var selectObj = document.querySelector('.choose');
selectObj.onchange = function() {
console.log(this.value);
}
</script>
Если у нас есть input c type="file", то при выборе файла также сработает onchange
<input type="file" class="our_file">
<script>
var obj = document.querySelector('.our_file');
obj.onchange = function() {
console.log('Вы выбрали файл');
}
<script>
Но при печати в input type="text" событие onchange вызываться не будет.
onresize - происходит при изменении размеров окна.
window.onresize = function() {
console.log('Размеры окна поменялись');
}
onmousedown, onmouseup - события, которые возникают при нажатии клавиш мыши.
onmousedown - срабатывает, если мы нажали клавишу мыши(необязательно левую) над объектом.
onmouseup - срабатывает, если клавиша мыши была отпущена над объектом
В отличии от этих двух событий onclick срабатывает, когда клавиша мыши была нажата и отпущена над объектом
onmouseover,onmousemove,onmouseout
onmouseover - срабатывает, когда курсор мыши появляется над объектом
onmousemove - происходит, когда мы двигаем курсором мыши над объектом.
onmouseout - срабатывает, когда курсор мыши уходит за пределы объекта.
Генерация "искусственных" кликов на кнопке
Для того, чтобы сгенерировать клик нужно получить DOM-объект и вызвать от него функцию click()
var obj = document.querySelector('.button');
obj.click();
Практика:
Есть квадрат красного цвета. При загрузке документа, по событию onload меняем его на зеленый.
Сделать сайт высотой в несколько экранов. При скроллинге мы должны показывать пользователю счетчик - смещение от верха.
Делаем сайт со скроллингом. Когда пользователь доскролил до определенного момента срабатывает событие.
В предыдущем задании добиться, чтобы всплывающее окно срабатывало один раз.
Сделать, чтобы при скроллинге фон блока приближался.
По середине страницы есть блок. Когда мы до него досрокливаем он увеличивается в размерах сначала по высоте, потом по ширине.
Делаем сайт с шапкой и скроллингом. Прокручиваем сайт вниз. При скроллинге вверх должна появляться шапка сайта, при скроллинге вниз она должна скрываться(пример статей на сайте Medium)
Есть лента постов. При прокрутке, если шапка поста спряталась, переносим ее автоматически вверх (пример лента Instagram)
Есть форма с двумя полями: для ввода логина и для ввода пароля. Сделать скрипт, который поздравляет пользователя alert'ом если данные были введены правильно.
Есть поле для ввода текста. Под ним показывается число символов, которые пользователь может ввести. С каждым введенным символом число убывает на единицу.
Пользователь вводит в input имя, после чего input очищается, и пользователь может ввести имя еще раз и т.д. Под input'ом показываем введенные имена и число - количество раз, которое данное имя было введено.
Есть форма для выбора и отправки файла. Необходимо ее скрыть и заменить на кнопку "ЗАГРУЗИТЬ". При нажатии на кнопку загрузить должно появляться окно выбора файла. После выбора файла происходит его автоматическая отправка из формы.
Создать игру, в которой объект управляется клавиатурой. На экране появляются "полезные предметы", которые объект должен "собрать" (приблизится к ним достаточно близко).
2048
Пример интерфейса со скролингом http://codepen.io/tholman/pen/XJjvGO http://www.framescollection.com/tunnelrats.html
Сделать горизонтальный progress bar, показывающий насколько сильно проскролена страница с помощью вертикального скролинга.
Реализовать интерфейс переключения страниц с помощью скроллинга как на приведенном сайте https://www.aristidebenoist.com/
Пример с заполнением формы http://codepen.io/zenu/pen/JKgEWZ