Событие onload происходит при загрузке страницы в браузере. Очень часто используется для запуска какого-то сценария.
<body onload="doSomething();">
В отличие от других событий onload происходит без участия пользователя.
После события onload всем переменным присваиваются начальные значения. При перезагрузке страницы все переменные ощищаются, а событие onload происходит заново, повторно присваивая переменным начальные значения.
Изменение размеров окна браузера вызывает событие onresize.
<body onresize="doSomething();">
Элементы на странице могут реагировать на нажатия мыши с помощью события onclick.
Параграф для опытов. Добавим слушатели событий для мыши - click, mousedown, mouseup.
<script>
const clickParagraph = document.getElementById("clickme");
clickParagraph.addEventListener('click', () => console.log('click'))
clickParagraph.addEventListener('mousedown', () => console.log('down'))
clickParagraph.addEventListener('mouseup', () => console.log('up'))
</script>
Если щёлкать мышкой по параграфу для опытов, то в консоли можно увидеть строки в следующем порядке: down, up, click.
Параграф для опытов с двойным щелчком. Добавим слушатель для двойного щелчка мыши.
const dblclickParagraph = document.getElementById('dblclick');
dblclickParagraph.addEventListener('dblclick', () => console.log('dblclick'));
Если сделать двойной щелчок на параграфе для опытов, то в логах увидим соответствующее событие. Одному элементу нельзя задать два события - click и dblclick, так как они мешают друг другу.
Аналогично есть события при прохождении курсора мыши над областью элемента и выхода из этой области. Проведите мышкой над заголовком для опытов.
const mouseHeader = document.getElementById('mouse');
mouseHeader.addEventListener('mouseover', () => console.log('mouseover'));
mouseHeader.addEventListener('mouseout', () => console.log('mouseout'));
Клавиатурные события keydown, keypress, keyup реагируют на нажатия клавиш.
addEventListener('keydown', (event) => {
if (event.key === 'c' && event.ctrlKey) {
console.log('Action canceled!');
}
});
Пример обнаружения нажатия Shift при щелчке мыши.
addEventListener('click', (event) => {
if (event.shiftKey) {
console.log('A Shifty Click!');
}
});
С появлением смартфонов и сенсорных экранов на других устройствах стало актуальным поддержка касаний экрана.
addEventListener('touchend', () => console.log('Touch stopped');
Можно не только добавлять слушатель, но и удалять его.
Параграф для опытов. Слушатель добавляется для одноразового действия, а затем удаляется. Щёлкните здесь, чтобы изменить фон параграфа. Второй щелчок уже не вызовет никакого эффекта.
<p id='once'>Параграф для опытов...</p>
<script>
const onceParagraph = document.getElementById('once');
onceParagraph.addEventListener('click', remove);
function remove(event) {
console.log('Enjoy this while it lasts!');
onceParagraph.style.backgroundColor = 'pink';
onceParagraph.removeEventListener('click', remove);
}
</script>
Некоторые элементы имеют встроенное поведение, например, ссылка реагирует на щелчок без всяких сценариев. Мы можем изменить это поведение по умолчанию.
Попробуйте щёлкнуть по ссылке внизу, ничего не произойдёт.
<p><a id='broken' href='http://alexanderklimov.ru'>Сломанная ссылка</a></p>
<script>
const brokenLink = document.getElementById('broken');
brokenLink.addEventListener('click',(event) => {
event.preventDefault();
console.log('Broken Link!');
});
</script>
Проверить, доступно ли изменение поведение по умолчанию, можно через свойства cancellable или defaultPrevented.