Java Tutorial Blog

jQuery Event Handling – Browser Events

//  by 

In this article we’ll discuss about jQuery browser events. The browser events are triggered when browser is resized or scrolled or any elements have not been loaded properly by the browser. Three browser events are discussed here namely error, scroll and resize events.  Using these browser events we can do number of things like re-arranging user interface elements when user resizes browser or loading alternative elements if primary elements failed to load or appending more content to the element when user does scrolling etc. If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

also read:

Browser Events

The following HTML code demonstrates the three browser events jQuery supports followed by brief description of each of these browser events.


<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
	     $('#myImage').error(function() {
	        console.log('myImage failed to load,
                       please assign missing image.');
	     }).attr("src", "newImage.png");

	     $("#myTextarea").scroll(function() {
	        console.log("myTextarea scrolled");
	     });

	     $(window).resize(function() {
	        console.log("window resized");
	     });
          });
    </script>
  </head>
  <body>
    <h1>jQuery Browser Events - Demo</h1>

    <textarea id="myTextarea" rows="2" cols="10">
      Please scroll this really long long text.
    </textarea>

    <img alt="myImageMissing" id="myImage" />
  </body>
</html>

error Event

The error event is triggered if any of the element(s) are not loaded property by the browser (like images). This event is helpful in providing alternate functionality in case any of the elements failed to load. For example, if image failed to load, we can set the alternative image as shown below.

$('#myImage').error(function() {
   console.log('myImage failed to load, please assign missing image.');
}).attr("src", "newImage.png");

<img id="myImage" alt="myImageMissing" />

error-event
In the above code example, we’re assigning a new image for the missing image when the error event is triggered.

scroll Event

The scroll event is triggered when user scrolls the element. This event can be applied to window objects or scrollable frames or any element with CSS property overflow set to scroll or auto.


$("#myTextarea").scroll(function() {
   console.log("myTextarea scrolled");
});

<textarea cols="10" rows="2">
    Please scroll this really long long text.
</textarea>

scroll-event

In the above screen capture, the scroll event is triggered when user scrolls the textarea.

resize Event

The resize event is triggered when width or height of the browser window is changed by resizing.

$(window).resize(function() {
   console.log("window resized");
});

resize-event

The resize event is triggered when user minimizes or maximizes or resizes the browser window.

The jQuery browser events useful in scenarios we need to capture the point where user resized the browser window. We may want to do UI re-structuring when browser window is resized, or want to hide some of the elements when the screen is resized to minimum width and height. We can use resize event to achieve this type of functionality.

In the same way, scroll event is useful to show or hide large amounts of data in HTML elements. The scroll event is triggered when user clicks on the horizontal or vertical scroll bars of element to scroll, or when user uses mouse scroll wheel to  scroll the area.

The error event is useful to provide fallback logic if browser failed to load any elements like images or videos.

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

About Ganesh Prakhya