jQuery Events
In this article, we will discuss about jQuery events with some examples.
jQuery Events
An event is a mechanism that allows us to run a piece of code(a function) when something happens on the page.
The following image depicts the sequence of operations for an click event :
Here are some examples of events :
Clicking a button
Changing a form element
resizing browser etc
Binding an Event
There are following 2 ways of binding an event to an element.
1) Using bind method
This method can be used for adding events to elements that get added to the page after it is loaded.
Example :
$("#buttonId").bind('click',function(){
//useful code here to handle the click event
);
Here is an example of using bind method for a button click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").bind('click',function(){
$("p").html("Button clicked");
});
});
</script>
</head>
<body>
<p>
This paragraph will be updated on button click
</p>
<button>
Click me
</button>
</body>
</html>
2) Using convenience method
Convenience methods can be used for adding events to elements while the page is being loaded.
$("#buttonId").click(function(){
//useful code here to handle the click event
);
Here is an example of using convenience click() method for a button click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button>hide me</button>
</body>
</html>
Common events
Here are some common DOM events :
| Mouse Events | Keyboard Events | Form Events | Document Events | Browser Events |
| click | keydown | submit | load | error |
| dblclick | keypress | focus | unload | resize |
| mouseenter | keyup | change | ready | scroll |
| mouseleave | select | |||
| mousedown | blur | |||
| mouseup |
Removing an Event
There are situations when you want to remove an event binding from an element.
For example, you don’t want an user to click on the submit button twice in a form. So, you can remove the binding after it is clicked once.
$("#buttonId").bind('click',function(){
//useful code here to handle the click event
);
//Remove click event
$("#buttonId").unbind('click');
//Remove all events
$("#buttonId").unbind();
Common jQuery Event Methods
We have already seen example of click() method above.
Lets see some examples of other event methods.
mouseup and mousedown methods
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseup(function(){
$(this).append("<span style='color:#f00;'>Mouse Up</span>");
})
.mousedown(function(){
$(this).append("Mouse Down");
});
});
</script>
</head>
<body>
<p>
Press mouse and release here
</p>
</body>
</html>
© 2016, https:. All rights reserved. On republishing this post, you must provide link to original post
