Listing b 12 attaches a simple event handler that

This preview shows page 356 - 358 out of 380 pages.

Listing B-12 attaches a simple event handler (that only returns a string) explaining whythe user should not leave the current page that he or she is on. The browser will display a con-firmation box with a full explanation, including your custom message.Listing B-12.Using the beforeunload Event to Stop People from Leaving a Page// Attach to the beforeunload handlerwindow.onbeforeunload = function(){// Return an explanation for why the user should not leave the page.return 'Your data will not be saved.';};errorThe error event is fired every time an error occurs within your JavaScript code. This canserve as a way to capture error messages and display or handle them gracefully. This eventhandler behaves differently than others, in that instead of passing in an event object, itincludes a message explaining the specific error that occurred.Listing B-13 shows a custom way for handling and displaying error messages in a bul-leted list, as opposed to the traditional error console.Listing B-13.Using the error Event to Keep a Viewable Error Log// Attach an error event handlerwindow.onerror = function( message ){// Create an <li> element to store our error messagevar li = document.createElement('li');li.innerHTML = message;APPENDIX B EVENTS REFERENCE335
// Find our error list (which has an ID of 'errors')var errors = document.getElementById('errors');// and add our error message to the top of the listerrors.insertBefore( li, errors.firstChild );};resizeThe resize event occurs every time the user resizes the browser window. When the user adjuststhe size of the browser window, the resize event will only fire once the resize is complete, notat every step of the way. Listing B-14 shows code that watches for instances where the user resizes the browserwindow too small, applying an alternate class to the document element (to provide betterdocument styling for the smaller window).Listing B-14.Using the resize Event to Dynamically Resize an Element // Watch for the user resizing the browser windowwindow.onresize = function() {// Locate the document element (to be used to find the window width)var de = document.documentElement;// Figure out the width of the browser// (unfortunately, every browser likes to do this differently)var w = window.innerWidth || (de && de.clientWidth) || document.body.clientWidth;// If the window is too small, add a class to document elementde.className = w < 990 ? 'small' : '';};scrollThe scroll event occurs when the user moves the position of the document within the browserwindow. This can occur from keyboard presses (such as using the arrow keys, Page Up/Down,or the spacebar) or by using the scrollbar.unloadThis event fires whenever the user leaves the current page (this could be the user clicking a link, hitting the Back button, or even closing the browser window). Preventing the defaultaction does not work for this event (the next best thing is the beforeunload event).

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture