In this blog, we will learn about jquery events. Jquery events are actions that are performed by the web pages when different users visit the web pages. An event represents the exact moment when something happens.
The following examples are some events.
- Moving a mouse over an element
- Form submission
- Scrolling of the web pages
- Web page loading
- Clicking on button
Some events lists:
Mouse Events
- click
- dblclick
- mouseenter
- mouseleave
Keyboard Events
- keyup
- keydown
- keypress
Form Events
- submit
- change
- focus
- blur
Document/Window Events
- load
- unload
- resize
- scroll
Note: The term “fires” is generally used with events. For example: The click event fires in the moment you press a key.
Syntax for jquery event method
In the jquery, most DOM events have an equivalent jQuery method. To assign a click event to all paragraphs on a page, do the following step:
$("p").click();
Then you need to define what should happen when the event fires and to pass a function to the event:
$("p").click(function(){
// action goes here!!
});
Example:
click() method
The click() method is used to handle the function of the html element when the user clicks on the html element. Follow the below snippet to learn the click() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery click() method</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function(){
$("p").click(function(){
alert("This paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on the text.</p>
</body>
</html>
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Custom Authentication Login And Registration Using Laravel 8
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example