Handling Click Events:
Click events are one of the most common interactions on web pages. With jQuery, you can easily attach click event handlers to DOM elements and execute specific actions when those elements are clicked.
Example:
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="clickBtn">Click Me</button>
<script>
$(document).ready(function() {
// Click event handler for the button
$("#clickBtn").click(function() {
alert("Button clicked!");
});
});
</script>
</body>
</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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="clickBtn">Click Me</button>
<script>
$(document).ready(function() {
// Click event handler for the button
$("#clickBtn").click(function() {
alert("Button clicked!");
});
});
</script>
</body>
</html>
In this example, a click event handler is attached to a button with the id
clickBtn. When the button is clicked, an alert box with the message "Button clicked!" will be displayed.
Handling Keypress Events:
Keypress events allow you to capture keyboard input from users. You can use jQuery to bind event handlers to specific keys or listen for any keypress on the page.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keypress Event Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
$(document).ready(function() {
// Keypress event handler for the text input
$("#textInput").keypress(function(event) {
// Get the keycode of the pressed key
var keycode = event.keyCode || event.which;
// Display the pressed key's keycode
alert("Key pressed: " + keycode);
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keypress Event Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
$(document).ready(function() {
// Keypress event handler for the text input
$("#textInput").keypress(function(event) {
// Get the keycode of the pressed key
var keycode = event.keyCode || event.which;
// Display the pressed key's keycode
alert("Key pressed: " + keycode);
});
});
</script>
</body>
</html>
In this example, a keypress event handler is attached to a text input field with the id
textInput. When a key is pressed while the input field is focused, an alert box will display the keycode of the pressed key.
Handling Mouse Movement Events:
Mouse movement events, such as mouseover and mouseout, allow you to track the movement of the mouse pointer over DOM elements. You can use jQuery to bind event handlers to these events and execute actions based on the mouse's position.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Movement Event Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="mouseDiv" style="width: 200px; height: 200px; background-color: lightgray;"></div>
<script>
$(document).ready(function() {
// Mouseover event handler for the div
$("#mouseDiv").mouseover(function() {
$(this).css("background-color", "lightblue");
});
// Mouseout event handler for the div
$("#mouseDiv").mouseout(function() {
$(this).css("background-color", "lightgray");
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Movement Event Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="mouseDiv" style="width: 200px; height: 200px; background-color: lightgray;"></div>
<script>
$(document).ready(function() {
// Mouseover event handler for the div
$("#mouseDiv").mouseover(function() {
$(this).css("background-color", "lightblue");
});
// Mouseout event handler for the div
$("#mouseDiv").mouseout(function() {
$(this).css("background-color", "lightgray");
});
});
</script>
</body>
</html>
In this example, mouseover and mouseout event handlers are attached to a
<div> element with the id mouseDiv. When the mouse pointer enters the div, its background color changes to light blue, and when it leaves, the background color reverts to light gray. Practice Excercise Practice now