Event Management
Event Management
Event Management is a free jQuery Academy lesson on CoddyKit — lesson 1 of 1. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 1 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Introduction
Hello,
While introducing jQuery, we said that it is not only DOM manipulation but also an important feature such as event management.
what is event
First, let's learn what an event is.
Events are mostly generated by the user in the web browser.
We can define many user-induced events such as mobile users touching the screen, Web users moving the mouse, clicking a button, and scrolling the mouse.
Since Javascript is a programming language, we will manage our program flow according to the events that occur.
Click
click() method
Let's start with the simplest event, the button click event.
The click() method is used to manage our click events in HTML.
We can listen for the click event with the syntax below.
$(selector).click(handler);
- With $(selector) we choose which element to listen to.
- The handler represents the callback function that will run in case of click.
Let's make an example.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Warning
Click method handles the button click with the anonymous function that it takes as argument.
Double Click
Mouse Events
Below are some events that can be created by the user with the mouse.
Let's click the button!
<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>Mouse events
Note that some events cannot be tested on the mobile app, as events such as Hover cannot be performed on mobile devices!
<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>Keyboard events
Keyboard Events
Now we will learn how to handle keyboard events.
First, let's define input and then handle the events that will be generated by this input.
<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>Form Events
With jQuery, we can also manage events that occur in forms.
Behaviors such as entering data into an input or making a selection from the select box are all form events.
Form Event example
In our code below, more than one form event is exemplified.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});window events
Finally, let's see the window events.
Perhaps the most important window event is $(document).ready(), but since we learned earlier about this event, we will learn about other window events.
resize method
resize() method
The resize method bind to the browser's window object and is triggered when windows' size changes.
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 method
scroll() Method
The scroll() method connects to a scrollable element or window object and is triggered when the user scrolls the corresponding component.
$(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
});Congratulations
Congratulations 🎉
We learned Event Management in jQuery.
In the next section, we will learn the making Animations with jQuery lesson.
Frequently asked questions
Is the “Event Management” lesson free?
Yes — the full text of “Event Management” is free to read here on the web, and the jQuery Academy course includes 1 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.
What will I learn in “Event Management”?
Event Management You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start jQuery Academy?
No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 1, so you can start here or from the beginning and move at your own pace.
How long does the “Event Management” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this jQuery Academy lesson?
Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.