Part 8 - JQuery Events - #Document and Windows Events| load, resize, and scroll methods
JQuery Events?
ln this tutorial will discuss about Events in jquery specially, Document/windows 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 () {
$("#image1").on("load", function (event) {
var message = "height: " + $(this).height() + " width: " + $(this).width()
$("span").text(message);
})
$("div").scroll(function () {
var message = "scrolled<br/>";
$("span").append(message);
})
})
$(window).resize(function () {
var message = "height: " + $(this).height() + " width: " + $(this).width()
$("span").text(message);
})
</script>
<style>
.btnclass {
height: 200px;
width: 200px;
overflow:scroll;
}
</style>
</head>
<body>
<span></span>
<div class="btnclass" >
<img src="banner.png?dummy=sdfhskdfhihhssssdssssss" id="image1" />
</div>
</body>
</html>
0 Response to "Part 8 - JQuery Events - #Document and Windows Events| load, resize, and scroll methods"
Post a Comment