jQuery is all about making the webpage more interactive. In this article, we will learn about the various jQuery events (actions) which help making a page more interactive. If you don't know what jQuery is and how to use it, please read jQuery Library and jQuery Syntax first.
Let us learn by looking at a simple example:
- <html>
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<style> - #div1{
- background-color:blue;
- color:white;
- height: 5%;
- width: 50%;
- text-align:center;
- }
- </style>
-
- </head>
- <body>
-
- <div id="div1">
- <b>Click me to trigger jQuery Event.<b>
- </div>
-
- <script type="text/javascript">
-
- $(document).ready(function() {
- $("#div1").on("click",function(){
- alert("Division is Clicked");
- });
- });
-
- </script>
-
- </body>
- </html>
Output
![Output]()
When you click anywhere in the division, you will get an alert.
![Output]()
So, How does the alert gets called?
As you can see, inside the document ready function, we are selecting division using it's id "div1". Then, comes the action. Here, the action is "on()" method. The on() method attaches one or more event handlers for the selected element. In our example, the selected element is div1, and we add an event handler "click" to it. Then, we have a function which has alert message. This is similar to onclick event of JavaScript.
So, we bound the division with an event handler. Whenever the user clicks anywhere in the division, the alert message will be displayed.
In the similar way, we can use various events in jQuery. Let's have a quick overview of few of them.
click()
This function will be executed whenever the user clicks on the selector element.
Example:
- $("p").click(function(){
- alert("Paragraph was clicked");
- });
focus()
This function will be executed whenever the field will get focused.
Example:
- $("input").focus(function(){
- $(this).css("color", "red");
- });
hover()
This function will be executed whenever the mouse enters the element.
Example:
- $("#div1").hover(function(){
- $(this).css("background-color","red");
- });
blur()
This function will be executed whenever the field loses the focus.
Example:
- $("input").blur(function(){
- $(this).css("color", "black");
- });
Try out these events and see the output for each of them.