#4 — События. Часть 1.

Сентября

2013

лайков

Практически на каждой странице сайта имеются элементы, которые должны так или иначе
реагировать на действие посетителя ресурса. Реакция элемента интернет-страницы на какое-либо
действие пользователя называется событием.

К событиям также относятся триггеры — события, которые создают скрипты. О событиях,
о способах их записи методами 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()

<!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>

<!DOCTYPE html>

<head>

<title>Основы jQuery - 4 События</title>

#scroll-text{

position: fixed;

top: 25px;

left: 25px;

}

</style>

</head>

<body>

$(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>

click events JavaScript JQuery js resize scroll Видеокурс Видеоурок события

Материалы к уроку:

Делись:

Оставь комментарий!

One thought on “#4 — События. Часть 1.”

Петрович:

22.01.2015 в 15:14

Привет! у меня вопрос: не совсем понял зачем необходимо передавать аргумент $(«button»).click(function (e){
$(this).text(«Pushed!»);
}); его можно вызвать и без (е) будет такой же результат

Войдите, чтобы ответить

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.