Event Methods in JQuery : Part 2
Events
All the action done on a web page according to which a web page respond is called an event.
Examples
- Clicking on a button
- loading of a web page
- Key press
Now let us take an example of mouse click event on a text written in a <p> element.
$(“p”).click(); Here we have selected element <p> on the click of which something should happen. Now we will define that what should happen to on the click event.
$(“p”).click(function(){
$(this).hide();
});
We have added an action on the event “click”, the action is hide the current/selected element in <p> tag.
Working code of this is as follows :
<html>
<head>
<title>First jquery example</title>
<!-- This line will load the bootstrap css file -->
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<!-- This file will load jquery file so that we can use its function -->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
<h3 class="text-primary" align="center"> First jquery example</h3>
<div class="panel panel-primary">
<p align="center">Click on the this text and it will be hidden</p><br>
<!-- <p align="center">This is the second text to hide</p> -->
</div>
</div>
</body>
<script type="text/javascript">
/*$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});*/
/*The code above this line also works same as the code below. The code shown below is an alternative code for the above code*/
$(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</html>
The above is just an example of click event, similar to click event we can have more events which are classified as follows
Mouse Events
- click
- dblcick
- mouseenter
- mouseleave
Keyboard Events
- keypress
- keydown
- keyup
Form Events
- submit
- change
- focus
- blur
Document/Window Events
- load
- resize
- scroll
- unload