Thursday, March 28, 2024

jQuery Basics for Web Developers: Other Events

So far I have talked about form events, mouse events, and keyboard events, to finish out the events; I will discuss the remaining events. Actually, there are a few more than what we have discussed, but those are more advanced topics for a later time.

.ready()

If you have been reading any of my other articles or have done anything with jQuery, you will have seen the .ready() event. This is one of the most common events because it is one of the first events you use with jQuery. This event is used to make sure the document is loaded and ready before executing any of the code contained within this code block. Any code within this code block will not load until the DOM is ready.

	$(document).ready(function {
		// code goes here
	});
		

.load()

The .load() event fires when the element and all sub-elements under that parent element are loaded. The elements that the load event can be used on are elements that can associated with a URL. Basically, anything that can be loaded using a direct URL: images, scripts, frames, iframes, and the "window" object. Typically, this event is not used much, but you should be aware of it just in case you need it.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(window).load(function () {
					alert("Loaded");
				});
			</script>
		</head>
		<body>
			<div>
				Loading...
			</div>
		</body>
	</html>
		

The example above will execute after the page is fully loaded including the elements, images, scripts, frames, and iframes. The biggest difference between this event and the .ready() event is this event can execute without the DOM being fully ready.

.unload()

The .unload() event is fired when the user navigates away from the page. The user could navigate away for many reasons, closing the browser, hitting the back/forward buttons in the browser, clicking a link to an external site, etc. This event is always attached to the "window" element.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(window).unload(function () {
					alert("You left me!");
				});
			</script>
		</head>
		<body>
		</body>
	</html>
		

The above example code is attached to the window element and fires an alert when the user navigates away. The easiest way to see the above code execute is to close the browser (but only when you made a test html file).

.error()

The .error() event fires when an element fails to load. Like the .load() event, the elements that this event can be used on are elements that can associated with a URL (images, scripts, frames, iframes, and the "window" object). It is actually not recommended to use this on the "window" object, but it could be attached to it to suppress errors.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$("#image").error(function () {
					alert("Image failed to load!");
				});
			</script>
		</head>
		<body>
			<img id="image" src="trytoload.jpg" alt="Image" />
		</body>
	</html>
		

The above example code will show an alert box if the image fails to load. The example code may not work if called from a local file since it relies on normal HTTP status codes.

.resize()

The .resize() event fires when the browser window is resized. For this event to work properly, it must be attached to the "window" element.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(window).resize(function () {
					alert("You resized me!");
				});
			</script>
		</head>
		<body>
		</body>
	</html>
		

The above example will show an alert box when the browser is resized. One thing to keep in mind is that this event can fire multiple times depending on the browser’s implementation of this event.

.scroll()

The .scroll() event fires when an element is scrolled. The elements can be the "window" object, frames, iframes, or elements with the CSS property set to scroll or auto (a height needs to be set less than the height of the element’s contents). It does not matter how the element is scrolled. It could be scrolled with the scroll bars, arrow keys, mouse wheel, etc.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
		</head>
		<body>
			<div id="scroller" style="overflow: scroll; height: 100px; width: 100px;">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus fermentum leo, ut consectetur
				libero sagittis eu. Sed vel interdum diam. Curabitur quis magna dolor.
			</div>
			<script type="text/javascript">
				$("#scroller").scroll(function () {
					alert("You scrolled me!");
				});
			</script>
		</body>
	</html>
		

The above example shows an alert box when the div element is scrolled. One thing to note on this is that the script is at the end of the document. For some reason, I have never been able to get this work without it being at the end of the document.

Conclusion

As I stated before, there are other events (mostly to do with errors) that you can use, but I have covered the majority of the events. The other events are more advanced topics which we might cover in the future.



Test the Code




Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured