Full Stack Development
jQuery Event Models-Event Handlers
By
[Link]
Assistant Professor
CSE-AIML Dept
MLR Institute of Technology
Overview of the Presentation
Event Handlers
jQuery Syntax for event methods
Click Event
Mouse Event
Form Event
Keyboard Event
Example Applications
jQuery Event Models- Event Handlers
Event Handlers:
All the different visitors' actions that a web page can respond to are called
events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
jQuery Event Models- Event Handlers
Here are some common DOM events:
Click Events Mouse Events Form Events Keyboard Events
click Mousedown submit Keydown
mouseup change Keypress
mouseenter focus Keyup
mouseleave blur
hover input
jQuery Event Models- Event Handlers
jQuery Syntax for Event Methods:
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You must
pass a function to the event:
$("p").click(function(){
// action goes here!!
});
jQuery Event Models- Event Handlers
Click Event:
This is the main event for handling clicks, used across various elements like
buttons and links.
Ex: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Event Example</title>
<script src="[Link]
jQuery Event Models- Event Handlers
<style>
#myButton {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#myButton:hover {
background-color: #45a049;
}
</style>
jQuery Event Models- Event Handlers
</head>
<body>
<h2>Click Event Example</h2>
<button id="myButton">Click Me!</button>
<p id="message"></p>
<script>
$(document).ready(function() {
// Handling the click event
$('#myButton').click(function() {
// Change the text of the paragraph
$('#message').text('Button was clicked!');
});
});
jQuery Event Models- Event Handlers
</script>
</body>
</html>
Output:
jQuery Event Models- Event Handlers
Mouse Event:
Mouse events detect when users interact with elements using their mouse.
Event Description
.mouseenter() When the mouse enters an element.
.mouseleave() When the mouse leaves an element.
.hover() Combines .mouseenter()
and .mouseleave().
.mousedown() When a mouse button is pressed.
.mouseup() When a mouse button is released.
jQuery Event Models- Event Handlers
mouseenter():
The mouseenter() method attaches an event handler function to an HTML
element. The function is executed when the mouse pointer enters the HTML
element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
jQuery Event Models- Event Handlers
alert("You entered p1!");
Output:
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
mouseleave():
The mouseleave() method attaches an event handler function to an HTML
element. The function is executed when the mouse pointer leaves the HTML
element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
jQuery Event Models- Event Handlers
alert("Bye! You now leave p1!"); Output:
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
mousedown():
The mousedown() method attaches an event handler function to an HTML
element. The function is executed, when the left, middle or right mouse button is
pressed down, while the mouse is over the HTML element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
jQuery Event Models- Event Handlers
alert("Mouse down over p1!"); Output:
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
mouseup():
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released,
while the mouse is over the HTML element.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
jQuery Event Models- Event Handlers
alert("Mouse up over p1!"); Output:
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
jQuery Event Models- Event Handlers
hover():
The hover() method takes two functions and is a combination of
the mouseenter() and mouseleave() methods.
focus():
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus
blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus
jQuery Event Models- Event Handlers
Ex: <!DOCTYPE html>
<html>
<head>
<script src="[Link]
[Link]">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
jQuery Event Models- Event Handlers
Output:
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
jQuery Event Models- Event Handlers
The on() Method:
The on() method attaches one or more event handlers for the selected elements.
Ex: <!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<script>
jQuery Event Models- Event Handlers
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
}); });
jQuery Event Models- Event Handlers
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
Output:
jQuery Event Models- Event Handlers
Form Event:
Form events help manage input validation, submission, and focus behavior.
Event Description
.submit() Fires when a form is submitted.
.change() Fires when an input field changes.
.focus() Fires when an input field gains focus.
.blur() Fires when an input field loses focus.
jQuery Event Models- Event Handlers
Form Event:
Form events help manage input validation, submission, and focus behavior.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple jQuery Form Events</title>
<script src="[Link]
</head>
jQuery Event Models- Event Handlers
<body>
<form id="myForm">
<input type="text" id="name" placeholder="Enter name"><br><br>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function() {
$("#name").keyup(function() {
[Link]("Typing: " + $(this).val());
});
jQuery Event Models- Event Handlers
$("#myForm").submit(function(event) {
alert("Form Submitted!");
//[Link]();
});
});
</script>
</body>
</html>
jQuery Event Models- Event Handlers
Keyboard Event:
Keyboard events detect when a user interacts using the keyboard.
Event Description
.keydown() Fires when a key is pressed down.
.keyup() Fires when a key is released.
.keypress() Fires when a key is pressed (deprecated,
use .keydown()).
jQuery Event Models- Event Handlers
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Keydown Event</title>
<script src="[Link]
</head>
<
jQuery Event Models- Event Handlers
<body>
<h2>Type something:</h2>
<input type="text" id="nameInput">
<p id="output"></p>
<script>
$(document).ready(function() {
$("#nameInput").keydown(function() {
$("#output").text("You are typing...");
}); }); </script> </body> </html>
SUMMARY
In this session we discussed about
jQuery event handlers and handling methods with example applications.