Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to use beforeunload event and DOMContentLoaded event in javascript". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to handle these situations! I hope you can read carefully and learn something!

1. beforeunload event

The beforeunload event occurs on the window object to give developers the possibility to prevent the operation before the page is unloaded. This event is triggered before the browser unloads the page and can be used to cancel the uninstall and continue using the original page. However, you can't cancel this event completely, because that would be equivalent to preventing users from leaving the current page. To this end, the intent of this event is to give control to the user. The message displayed informs the user that the page is about to be unloaded (which is why this message is displayed) and asks if the user really wants to close the page or if they want to stay as shown. In order to display this pop-up dialog box, you must set the value of event.returnValue to the string you want to display to the user (for IE and Fiefox) and return it as the value of the function (for Safari and Chrome), as shown in the following example.

EventUtil.addHandler(window, "beforeunload", function(event){

event = EventUtil.getEvent(event);

var message = "I'm really going to miss you if you go. ";

event.returnValue = message;

return message;

});

IE and Firefox, Safari and Chrome all support beforeunload events, and they all pop up this dialog box asking users if they really want to leave. Opera versions 11 and earlier do not support beforeunload events.

DOMContentLoaded event As mentioned earlier, the window load event fires when everything in the page has been loaded, but this process can be cumbersome due to too many external resources to load. The DOMContentLoaded event fires after the DOM tree is complete, regardless of whether images, JavaScript files, CSS files, or other resources have been downloaded. Unlike load events, DOMContentLoaded supports adding event handlers early in the page download, which means users can interact with the page as early as possible. To handle the DOMContentLoaded event, add an event handler for document or window (although this event bubbles to window, its target is actually document). Consider the following example.

EventUtil.addHandler(window, "DOMContentLoaded", function(event){

alert("Content loaded. ");

});

2. DOMContentLoaded event

Object does not provide any additional information (its target attribute is document). IE 9 +, Firefox, Chrome, Safari 3.1+, and Opera 9+ all support DOMContentLoaded events, which are often used to add event handlers and perform other DOM operations. This event always fires before the load event. For browsers that do not support DOMContentLoaded, we recommend setting a timeout call with a time of 0 ms during page loading, as shown in the following example.

setTimeout(function(){

//add event handler here

}, 0);

What this code actually means is: "Run this function as soon as the current JavaScript processing completes. "There is only one JavaScript processing procedure during page download and build, so timeout calls fire immediately at the end of the procedure. Whether this time is synchronized with the time DOMContentLoaded is triggered depends on the browser the user is using and other code on the page. To ensure that this method works, it must be called as the first timeout on the page; even then, there is no guarantee that the timeout will be triggered before the load event in all contexts.

"javascript beforeunload event and DOMContentLoaded event how to use" the content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.