События нужны для того, чтобы отследить определенное действие по объекту.
Чтобы установить событие, необходимо написать следующую конструкцию:
$(selector).event(function);вместо event вы пишите название события, которые мы разберем ниже и функцию, которая будет запускаться при срабатывании этого события.
С функцией у вас есть два выхода:
1) Внедрить функцию в событие.
$(selector).click(function(){
//действие при срабатывании функции
});2) вынести функцию за пределы события.
function function_click(){
//действие при срабатывании функции
}
$(selector).click(function_click);Разберем самые часто используемые события:
1) click()
Самое простое. Клик по объекту. Если вы навели на объект и кликнули мышкой, то сработает это событие.
2) dblclick()
Как и обычный клик, только при двойном нажатии.
3) mousedown()
На самом деле, чтобы произвести клик, мы сначала опускаем кнопку мыши, а потом поднимаем. Так вот мы можем отследить отдельно эти составляющие.
mousedown срабатывает, когда мы опустили кнопку мыши.
4) mouseup()
Это событие, соответственно, срабатывает, когда мы подняли кнопку мыши.
5) mousemove()
Наша мышь постоянно находится в движении. Так вот, мы можем отследить над каким объектом она сейчас движется. Соответственно, если мышь "пробегает" над объектом, то сработает данное событие.
При этом, постоянно, пока мышь движется это событие будет срабатывать.
6) change()
Это событие сработает, если произойдет с объектом какое-то изменения состояния. Оно больше относится к таким объектам, как input или select.
Если в ввели что-то в input, то событие сработает. Если измените свойство в select, то, опять же, событие сработает. Если у вас стоит checkbox и вы поставили галочку, то понятно что будет)
7) on()
В использовании событий, есть один нюанс, не зная которого можно довольно на долго затупить) Дело в том, что события "вешаются" на объекты только в момент загрузки страницы. А это значит, что если у вас стоит событие на класс .button, а вы на страницу поставили кнопку методом html(), то при клике на эту кнопку событие на сработает!
Для того, чтобы событие можно было вешать но новоиспеченные теги, придумали событие on. Оно работает вот так:
$(document).on('click','.object',function(){
//Ну и тут пишете то, что вы придумали
});
Соответственно, вместо click можно написать любое вышеуказанное событие, а вместо .object, любой селектор на ваш объект.
Внутри функции, при использовании событий, можно использовать объект $(this). Это селектор по объекту, с которым произошло событие.
$('.object').click(function(){
$(this).hide();
});В данном случае, если кликнуть по объекту, то он скроется.
Клик вне элемента.
Так же, мы можем создать свое событие, которое не является системным, но иногда его необходимо использовать.
$(document).mouseup(function (e){ // событие клика по веб-документу
var div = $("#popup"); // тут указываем селектор элемента
if (!div.is(e.target) // если клик был не по нашему блоку
&& div.has(e.target).length === 0) { // и не по его дочерним элементам
div.hide(); // скрываем его
/*Или описываем все действия, которые хотим выполнить при этом событии*/
}
});В принципе, все прокомментировано. Просто вставляем код, во второй строке прописываем по какому элементу необходимо установить событие и с 5 строки пишем все, что хотим сделать, если событие сработало.