Управление событиями
Управление событиями
«Управление событиями» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.
Введение
Здравствуйте!
Представляя jQuery, мы говорили, что это не только изменение DOM, но и важная возможность, например управление событиями.
Что такое событие
Сначала давайте узнаем, что такое событие.
События чаще всего создаются пользователем в веб-браузере.
Мы можем определить множество вызванных пользователем событий: касание экрана мобильным пользователем, движение указателя мыши, нажатие кнопки и прокрутка.
Поскольку JavaScript — это язык программирования, мы будем управлять ходом выполнения программы в зависимости от происходящих событий.
Нажатие
Метод click()
Начнём с самого простого события — события нажатия кнопки.
Метод click() используется для управления событиями нажатия в HTML.
Мы можем отслеживать событие нажатия с помощью следующего синтаксиса.
$(selector).click(handler);
- С помощью $(selector) мы выбираем элемент, события которого нужно отслеживать.
- Обработчик представляет callback-функцию, которая будет выполнена при нажатии.
Создадим пример.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Предупреждение
Метод click обрабатывает нажатие кнопки с помощью анонимной функции, переданной ему в качестве аргумента.
Двойное нажатие
События мыши
Ниже приведены некоторые события, которые пользователь может создавать с помощью мыши.
Нажмём кнопку!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>События мыши
Обратите внимание: некоторые события нельзя проверить в мобильном приложении, поскольку такие события, как Hover, невозможно выполнить на мобильных устройствах!
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>События клавиатуры
События клавиатуры
Теперь мы узнаем, как обрабатывать события клавиатуры.
Сначала определим поле ввода, а затем обработаем события, которые будут создаваться этим полем.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>События формы
С помощью jQuery мы также можем управлять событиями, происходящими в формах.
Ввод данных в поле или выбор значения из списка — всё это события формы.
Пример событий формы
В приведённом ниже коде показано несколько событий формы.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});События window
Наконец, рассмотрим события window.
Возможно, самое важное событие window — это $(document).ready(), но поскольку мы уже изучали его ранее, теперь рассмотрим другие события window.
Метод resize
Метод resize()
Метод resize привязывается к объекту window браузера и срабатывает при изменении размера окна.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});Метод scroll
Метод scroll()
Метод scroll() подключается к прокручиваемому элементу или объекту window и срабатывает, когда пользователь прокручивает соответствующий компонент.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Поздравляем
Поздравляем 🎉
Мы изучили управление событиями в jQuery.
В следующем разделе мы изучим создание анимаций с помощью jQuery.
Часто задаваемые вопросы
Урок «Управление событиями» бесплатный?
Да — полный текст урока «Управление событиями» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.
Чему я научусь в уроке «Управление событиями»?
Управление событиями Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать jQuery Academy?
Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Управление событиями»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке jQuery Academy?
Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.