В этом небольшом снипете, я поделюсь с вами тем, как уловить тот момент, когда пользователь кликает по кнопке или какому-либо другому элементу.
HTML
С помощью HTML нужно создать элемент, который будет использоваться для клика. В данном пример я буду использовать <button>, как показано в примере ниже.
<button id="btn">Нажми на меня</button>
jQuery
Есть множество вариантов того, как уловить клик с помощью jQuery. Многие из них мы рассмотрим ниже.
Первый вариант
Это прописать onclick="" атрибут для вашего элемента и внутрь поставить название вашей функции, то есть получиться, как в примере ниже:
<button id="btn" onclick="alert('Кнопка была нажата')">Нажми на меня</button>
Как это работает? При нажатии на эту кнопку сработает alert и покажет сообщение «Кнопка была нажата».
Такой вариант желательно использовать, если ваш скрипт не большой, а состоит всего и трех-четырех слов или даже менее. Пример выше можно сделать с использованием вызываемой функции, как на примере ниже:
<button id="btn">Нажми на меня</button>
<script>
function callAlert() {
alert('Кнопка была нажата');
}
</script>
Эффект будет тот же самый, что и прописать alert внутри onclick. Но вариант с функцией позволяет расписать логику нажатия в раскрытом и понятном виде. Теперь внутри функции вы сможете добавлять комментарии, если ваша функция будет большая (чтобы потом не забыть что она делает и тд).
Второй вариант
С помощью второго варианта мы биндим нажатие на элемент с помощью встроенной функции .click() в jQuery.
<button id="btn">Нажми на меня</button>
<script>
$(function() {
$(document).ready(function() {
$('#btn').click(function() {
alert('Кнопка была нажата');
});
});
})
</script>
Из примера выше видно, что когда документ был полностью загружен $(document).ready(function() то .click() функция начинает работать.
Как значение указывается id элемента (#btn) — в нашем случае кнопки, на которую наклывадется проверка нажатия на нее. И когда она будет кликнута, пользователь увидит alert сообщение «Кнопка была нажата».
Во втором варианте так же можно использовать отдельную функцию. Пример того как это сделать показан ниже:
<button id="btn">Нажми на меня</button>
$(function() {
$(document).ready(function() {
$('#btn').click(function() {
callAlert();
});
});
function callAlert() {
alert('Кнопка была нажата');
}
})
На этом все. Если у вас остались какие-либо вопросы — задавайте их в комментарии.
