


#4 — События. Часть 1.
Практически на каждой странице сайта имеются элементы, которые должны так или иначе
реагировать на действие посетителя ресурса. Реакция элемента интернет-страницы на какое-либо
действие пользователя называется событием.
К событиям также относятся триггеры — события, которые создают скрипты. О событиях,
о способах их записи методами jQuery и пойдет речь в сегодняшнем и последующем видеоуроках.
На какие группы делятся события jQuery
В jQuery все события подразделяются на несколько групп. К ним относятся события браузера,
события клавиатуры, события мыши, события документа и т.д. Когда событие срабатывает, создается
новый объект events. Он содержит необходимую информацию о событии.
На этом занятии вы узнаете, как правильно записать методами jQuery события мыши (click)
и браузера (resize и scroll).
Приятного всем просмотра! Учитесь с удовольствием!
Вызов $(element).eventName(handler) привязывает обработчик handler к событию eventName элемента element, если обработчик события не указан ($(element).eventName()), то такой вызов приводит к срабатыванию события.
События браузера:
- .scroll()
- .resize()
События клавиатуры:
- .focusout()
- .keydown()
- .keypress()
- .keyup()
События мыши:
- .click()
- .dblclick()
- .focusout()
- .hover()
- .mousedown()
- .mouseenter()
- .mouseleave()
- .mousemove()
- .mouseout()
- .mouseover()
- .mouseup()
События документа:
- .load()
- .ready()
- .unload()
События форм:
- .submit()
- .blur()
- .change()
- .focus()
- .focusin()
- .select()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Основы jQuery - 4 События</title> <style type="text/css"> #scroll-text{ position: fixed; top: 25px; left: 25px; } </style> </head> <body> <button>Push me!</button> <p id="resize-text"></p> <p id="scroll-text"></p> <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> <script src="jquery-2.0.3.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function (e){ $(this).text("Pushed!"); }); $(window).resize(function (e) { $("#resize-text").text("Width: " + window.innerWidth + ", Height: " + window.innerHeight); }) $(window).scroll(function (e) { $("#scroll-text").text("Position Y: " + window.scrollY); }) }); </script> </body> </html> |
Оставь комментарий!
One thought on “#4 — События. Часть 1.”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Привет! у меня вопрос: не совсем понял зачем необходимо передавать аргумент $(«button»).click(function (e){
$(this).text(«Pushed!»);
}); его можно вызвать и без (е) будет такой же результат