jquery window events

Hey guy,

Welcome to my article ,

If you want more jquery updates you can visit our website wearewriter.

If you want more new updates of jquery so visite jquery official site jquery.com

Previous chapter we discuss about the jquery form events and today we discuss about the jquery window events

jquery window events

These window events are following –

  1. load()-Occurs when document is loaded.
  2. unload()-Occurs when documents is unloaded.
  3. scroll()-Occurs when window is scrolled.
  4. resize()-Occurs when window is resized.

jquery load() events

The load () method is used to load a specific element. It attaches an event handler to load event.

The load event occurs when a specific element is loaded. It is generally used with a URL (image, script, frame, iframe), and the window object.

Note: On some browsers, the load event did not trigger if the image is cached.

SYNTAX-It adds a function to the load event.

$(selector).load(function) 

EXAMPLE-

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("img").load(function(){  
        alert("Image loaded.");  
    });  
});  
</script>  
</head>  
<body style="background-color: pink;">
<H1>Welcome to wearewriter.com</H1>

<hr>  
<P>Jquery load() Event</P> 
<img src="img/icon1.png" alt="goal">  
<p><b>Note:</b> On some browsers, the load event did not trigger if the image is cached.</p>  
</body>  
</html>  

jquery unload() events

The unload event is triggered when:

  1. a link to leave the page is clicked
  2. a new URL is typed in the address bar
  3. the forward or back buttons are used
  4. the browser window is closed
  5. the page is reloaded

The unload() method specifies what happens when a unload event occurs.

Note: The unload event might work differently in different browsers. Be sure to test this method in all browsers, before use.

SYNTAX-

$(selector).unload(function)

EXAMPLE-

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $(window).unload(function(){  
        alert("Goodbye!");  
    });  
});  
</script>  
</head>  
<body style="background-color: gainsboro;">
<H1>Welcome to wearewriter.com</H1>

<hr>  
<p>When you click <a href="https://wearewriter.com/">this link</a>, or close the window,  
 unload event will be triggered.</p>  
</body>  
</html> 

OUTPUT-

jquery scroll() events

The scroll event occurs when the user scrolls in the specified element.

The scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs.

SYNTAX-

$(selector).scroll()

Attach a function to the scroll event:

$(selector).scroll(function)

EXAMPLE-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function(){
  $("div").scroll(function(){
    $("span").text( x+= 1);
  });
});
</script>
</head>
<body style="background-color: gainsboro;">
<H1>Welcome to wearewriter.com</H1>
<P>JQUERY SCROLL() EVENT</P>
<hr>

<p>Try the scrollbar </p>

<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>

<p>Scrolled <span>0</span> times.</p>

</body>
</html> 

OUTPUT-

jquery resize() events

The resize event occurs when the browser window changes size.

SYNTAX

$(selector).resize()

Attach a function to the resize event

$(selector).resize(function)

EXAMPLE-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function(){
  $(window).resize(function(){
    $("span").text(x += 1);
  });
});
</script>
</head>
<body>
<H1>Welcome to wearewriter.com</H1>
<P>JQUERY RESIZE() EVENT</P>
<HR>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>

</body>
</html>

OUTPUT-

Thank you guys fow watch my article for more jquery update go through our website wearewriter.com

Thank for your support.

jquery window events

Jquery Form Events

jQuery keyboard events

jQuery Mouse Events

Leave a Comment

Show Buttons
Hide Buttons