This is the 22nd day of my participation in the August More Text Challenge.
BOM Browser Object Model
● BOM provides objects that interact with browser Windows independently of content. The core object is window
window object
● The Window object is the top level object of the browser and has a dual role
● It is an interface for JS to access the browser window
● It is a global object. Variables and functions defined in the global scope become properties and methods of the Window object. The window can be omitted when called
Common event
● Window (page) load event Window. onload, which is triggered when the document content is fully loaded. With the window.onload event, our js code can be written above the page element because onload waits until the page is fully loaded before executing the handler
Onload = function(){}
● Window.adDeventListener (‘load’, function(){})
The load event can be triggered in the following three cases
When a link
● F5 Refresh page
● Forward and back buttons
● But firefox is an exception
● Firefox has a round-trip cache, which stores not only page data but also DOM and JavaScript state, effectively caching the entire page. So the forward and back buttons will not trigger the load event
● At this point you can load events using PagesHow
● This event is triggered when the page is displayed, whether the page is from cache or not. In the reload page, the PagesHow event fires after the Load event fires.
● Persisted page events will now be emitted from the page in the cache by the persisted property in the event object (true if the page in the cache is persisted). Otherwise, false)
● If more than one onload event is written, the later onload event will overwrite the first onload event
DOMContentLoaded The event, which is triggered when the DOM has finished loading (not including stylesheets, images, flash, etc.). This event is supported only in IE9 +.
● If there are a lot of pictures on the page, it may take a long time from user access to onload event trigger, interaction effect can not be achieved, will inevitably affect the user experience, at this time using DOMContentLoaded event is more appropriate
Low document. AddEventListener (‘ DOMContentLoaded ‘, function () {})
Resize the window event resize
Onresize = function(){}
● window.adDeventListener (“resize”, function(){});
● Add: window.innerWidth gets the width of the current window, and innerheight gets the height
● The box is hidden when the width of the window is less than or equal to 80, and vice versa
● Adjust the window size trigger event, call the handler function. We often use it with responsive layouts
The timer
● window.setTimeout(call function, [delay milliseconds]); The handler function is executed after the timer expires. The delay time is expressed in milliseconds (1s = 1000ms) without units. You can omit this parameter and default to immediate execution. (You can use this event without writing window)
● There may be many timers on your page, so give them a name
● A function in the setTimeout event needs to wait until the time is up before calling the function, so it is called a callback function. (Simple to understand: a callback is a callback that goes back and is called only after the last thing is done.) The previous element.onclick = function(){} and element.addeventListener (‘click’, function(){}) are also callback functions
Stop the setTimeout() timer
● Window.clearTimeout (timer name)
● The setInterval() method calls a function repeatedly, calling the callback once in a while
Stop the setInterval() timer
● clearInterval(timer name)
This points to the problem
● In general, the ultimate reference to this is the object on which it was called
In a global scope or normal function, this refers to the global object Window (note: this also refers to window).
● A global function is called as a method on the window object, which is actually window.fn(). The window is often omitted (as is the timer).
In a method call, this refers to whoever is called
Constructor, this refers to an instance of the constructor
Js to perform
● One of the main features of THE JS language is single thread, can only do one thing at a time. Single threading means that all tasks are queued, and the previous task finishes before the next one can be executed. Here’s the problem: if js takes too long to execute, it will cause the page rendering to be incoherent, causing the page rendering load to block
● Synchronization: after the completion of a task before the execution of a task, the order of execution and task order is consistent, synchronous
● Asynchronous: when dealing with a task that takes a long time, you can do other tasks while dealing with this task (for example, it takes half an hour to cook soup, so you can wash vegetables, cut vegetables and cook vegetables during this process)
js Enforcement mechanism
Synchronous tasks: are executed on the main thread, forming an execution stack
Asynchronous tasks: implemented through callback functions. Asynchronous task-related callback functions are placed on a task queue (also known as a message queue)
● 1, common events, such as Click, resize, etc
● 2. Resource loading events, such as Load and error
● 3. Timers, including setTimeout and setInterval
mechanism
● 1. Perform the synchronization task in the stack first
● asynchronous task (callback function) in the task queue
● 3. Once all the synchronous tasks in the execution stack are completed, the system will read the asynchronous tasks in the task queue in sequence. The read asynchronous task ends the wait state and enters the execution stack to start execution
Location object
● The window object gives us a location property that gets or sets the FORM’s URL and can be used to parse the URL. Because this property returns an object, it is also called a Location object
● URL: Uniform Resource Locator is the address of a standard Resource on the Internet. Every resource on the Internet has a unique URL that contains information indicating where the file is and what should browsers do with it
Location object properties
● Location. href Gets or sets the entire URL
● Location. host Returns the host (domain name) (such as www.itheima.com)
● Location. port Returns the port number, or null characters if it is set ● location. pathName Returns the path
● Location. search returns the parameter
● Location. hash returns snippets where the content after the hash is commonly seen in anchor links
● Location object method
● Location.assign (), which is similar to the href attribute, allows you to jump to pages (also called redirects pages).
● Location.replace (), replace the current page, because no history is recorded, so you can’t back up the page
● Location.reload (), reloads the page, equivalent to the F5 refresh button. If the parameter defaults to empty or false, refresh directly. Force refresh when set to true (equivalent to CTRL + F5)
The navigator object
● The Navigator object contains a lot of browser information and has many properties. The most common is the userAgent property, which returns the value of the User-Agent header of the server sent by the client
The history object
● The Window object gives us a History object that interacts with the browser history. This object contains the URL that the user has visited (in the browser window)
methods
● History.back (), back function
● history.forward(), forward function
● History. go(parameter), forward and backward function. Parameter 1, advance one page; With the parameter -1, back up one page