JQuery Events?
ln this tutorial will discuss about Events in jquery specially Mouse and Keyboard events. We have several type of event types available which consists a lot of methods to perform some action whensome event occur.
Event types
1. Mouse Events
2. Keyboard 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.
2. Keyboard Events
- 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 () {
// $("span ").css({ "border": "2px solid red", "padding": "10px" });
// $("table th").css({ "background-color": "red", "color": "white" });
// $("table tr:even").css({ "background-color": "blue", "color": "white" });
//$("table tr:odd").css({ "background-color": "yellow", "color": "black" });
// $("p:first").css({ "border": "2px solid blue", "padding": "10px" });
// $("p:last").css({ "border": "2px solid blue", "padding": "10px" });
$("div[title]").css({ "border": "2px solid blue", "padding": "10px" });
$("a[href='google.com']").css({ "border": "2px solid red", "padding": "10px" });
$("#button1").click(function () {
alert("I am clicked")
})
$("#button2").dblclick(function () {
alert("I am double clicked")
})
$("#button3").mousedown(function () {
alert("Mouse down")
})
$("#button4").mouseup(function () {
alert("Mouse up")
})
$("#button5").mouseenter(function () {
alert("Mouse enter")
})
$("#button6").mouseleave(function () {
alert("Mouse leave")
})
$("#div1").mousemove(function (event) {
$(this).html("PageX:" + event.pageX + " PageY:" + event.pageY);
})
$("#button7").keyup(function (event) {
alert("key up : " + event.key +" "+ event.keyCode)
})
$("#button8").keydown(function (event) {
alert("key down: " + event.key + " " + event.keyCode)
})
$("#button9").keypress(function (event) {
alert("key press: " + event.key + " " + event.keyCode)
})
})
</script>
</head>
<body>
<div title="div1" style="margin-bottom:50px;padding:10px">
<a href="google.com">click</a>
<span>child1 </span>
</div>
<button id="button1" style="width:100px;height:100px">Click Me </button>
<button id="button2" style="width:100px;height:100px">dblClick Me </button>
<button id="button3" style="width:100px;height:100px">Mousedown </button>
<button id="button4" style="width:100px;height:100px">Mouseup</button>
<button id="button5" style="width:100px;height:100px">Mouse Enter </button>
<button id="button6" style="width:100px;height:100px">Mouse Leave </button>
<input type="text" id="button7" placeholder="key up">
<input type="text" id="button8" placeholder="key down">
<input type="text" id="button9" placeholder="key press">
<div id="div1" style="height:100px;width:100px;border:2px solid blue">
</div>
<div id="div2" style="height:100px;width:100px;border:2px solid red">
</div>
<div title="div2" style="margin-bottom: 50px;padding:10px">
<a title="mylink" href="technotipstutorial.blogspot.com">click</a>
<span>child2 </span>
</div>
<div title="div3" style="margin-bottom: 50px;padding:10px">
<table border="1" style="width:30%">
<tr>
<th>
Name
</th>
<th>Department</th>
</tr>
<tbody>
<tr><td>Ashish</td><td>Development</td></tr>
<tr><td>John</td><td>QA</td></tr>
<tr><td>Sara</td><td>Development</td></tr>
<tr><td>Lara</td><td>Implementation</td></tr>
<tr><td>Methew</td><td>Development</td></tr>
<tr><td>Ashish</td><td>Development</td></tr>
</tbody>
</table>
</div>
<span title="span1" style="margin-bottom: 50px;padding:10px">
span1
</span>
<span title="span2" style="margin-bottom: 50px;padding:10px">
span2
</span>
</body>
</html>
No comments:
Post a Comment