JQuery Events?
ln this tutorial will discuss about Events in jquery specially, Form Events. We have several type of event types available which consists a lot of methods to perform some action when some event occur.
Event types
1. Mouse Events
4. Document/windows Events
Event types
1. Mouse Events
- click (): Occurs when a mouse click.
- dblclick () :Occurs when a mouse double-click.
- mousedown (): Occurs when mouse button is pressed.
- mouseup (): Occurs when mouse button is released
- mouseenter (): Occurs when mouse enters in an element region.
- mouseleave (): Occurs when mouse leaves an element region.
- mousemove (): Occurs when mouse pointer moves.
- Keydown (): Occurs when key is pressed.
- Keypress (): Occurs when key is pressed and released.
- Keyup (): Occurs when key is released..
- blur (): Occurs when the element loses focus.
- change (): Occurs when the element changes.
- focus (): Occurs when the element gets focus.
- Submit (): Occurs when form is submitted
- Select ():Occurs when input text is selected
4. Document/windows Events
- load (): Occurs when document is loaded.
- Resize (): Occurs when window is resized.
- Scroll (): Occurs when window is scrolled.
- Unload (): Occurs when documents is unloaded. are actions that can be detected by your Web Application.
# Example
Replace your html code with below code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("#text1").blur(function (event) {
$(this).css({"background-color":"red","color":"white"})
})
$("#text2").change(function (event) {
$(this).css({ "background-color": "blue", "color": "white" })
})
$("#text3").focus(function (event) {
$(this).css({ "background-color": "green", "color": "white" })
})
$("#myform").submit(function () {
var first = $("#first").val();
var second = $("#second").val();
$("span").text(first + " " + second);
})
$("#select1").select(function () {
alert("something selected")
})
})
</script>
<style>
.btnclass {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<input type="text" id="text1" placeholder="blur event" />
<input type="text" id="text2" placeholder="change event" />
<input type="text" id="text3" placeholder="focus event" />
<br /><br />
<form id="myform">
<input type="text" id="first" placeholder="first name" />
<input type="text" id="second" placeholder="last name" />
<input type="submit" />
</form>
<span>
</span>
<br />
<input type="text" id="select1" placeholder="select event" />
</body>
</html>
No comments:
Post a Comment