current position:Home>Learn more about fishing -- BOM browser object model | more challenges in August

Learn more about fishing -- BOM browser object model | more challenges in August

2021-08-27 07:45:40 GTW_ Zeus

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details :8 Yuegengwen challenge

BOM Browser object model (browser object model)

●   BOM Provides objects that interact with browser windows independent of content , Its core object is window

image.png

window object

●   window Objects are browser top-level objects , He has a dual role

●   He is js An interface for accessing browser windows

●   He is a global object , Variables and functions defined in the global scope will become window Properties and methods of objects , You can omit... When calling window

Common events

●   window ( page ) Loading event window.onload, This event is triggered when the document content is fully loaded . With window.onload event , our js The code can be written above the page elements , because onload It is to wait until all the pages are loaded before executing the processing function

●   window.onload = function( ){ }

●   window.addEventListener('load', function( ){ })

image.png

There are three conditions that trigger load event

●   a link

●   f5 Refresh the page

●   The forward and backward buttons

●   But Firefox is an exception

●   Firefox browser has round-trip cache , Not only save the page data , Still remain in the DOM and JavaScript The state of , It's actually caching the entire page . Therefore, the forward and backward button will not trigger load The event

●   You can use pageshow Loading event

●   This event is triggered when the page is displayed , Whether the page comes from the cache or not . In the reload page ,pageshow The event is triggering load Triggered after event .

●   You can use... In the event object persisted attribute To determine whether it is triggered by a page in the cache pageshow event ( If the cache page is triggered, the return value is true; Otherwise false)

●   If you write more than one onload event , What you write later will cover what you write first onload event

DOMContentLoaded event , When DOM This event is triggered when the loading is completed ( Does not contain style sheets 、 picture 、flash etc. ). The incident is IE9 The above supports .

●   If there are many pictures on the page , From user access to onload Event triggering may take a long time , Interaction cannot be achieved , Inevitably affect the user experience , Use at this time DOMContentLoaded Events are more appropriate

●   document.addEventListener('DOMContentLoaded', function( ){ })

Window resizing Events resize

●   window.onresize = function( ){ }

●   window.addEventListener("resize", function( ){ });

●   Add :window.innerWidth You can get the width of the current window ,innerheight Gain height

●   When the width of the window is less than or equal to 80 The box is hidden , On the contrary, the box shows

image.png

●   Event triggered when window size is adjusted , Call handler . We often use it with responsive layouts

Timer

●   window.setTimeout( Call function , [ Delay milliseconds ] );   After the timer expires, execute the processing function . The delay time here is in milliseconds (1s = 1000ms), No unit . You can omit not writing this parameter , It defaults to immediate execution .( When using this event, you can not write window)

image.png

●   Many timers may be used in the page , So give him a name when you use it

●   setTimeout The function in the event needs to wait , It's time to call this function , So it's called a callback function .( Simple understanding : A callback is a call back , Call this function only after the last thing is done .) Previous element.onclick = function( ){ } and element.addEventListener('click', function( ){ }) The function in this is also a callback function

stop it setTimeout() Timer

●   window.clearTimeout( Timer name )

image.png ●   window.setInterval( Callback function , [ The number of milliseconds between ] )

●   setInterval() Method will repeatedly call a function , Every once in a while , Just call the callback function once

stop it setInterval( ) Timer

●   clearInterval( Timer name )

image.png

this Direction problem of

●   In general ,this The final point of , It's the object that calls it

●   1、 Global scope or ordinary function ,this Point to global object window( Be careful : In the timer this Point to window)( The following are output window)

image.png

●   The function under global action will act as window A method of an object , When called, it is actually window.fn(),window Often omit ( The same goes for timers )

Method call , Who is calling ,this Just point to who

image.png

In the constructor ,this Point to an instance of the constructor

image.png

js perform

●   js One of the characteristics of language is single thread , Only one thing can be done at a time . Single threading means that all tasks have to be queued , The previous task is over , Before we move on to the next task . There's a problem : If js Execution time is too long , This will make the page render incoherent , Page rendering load blocked

●   Sync : Execute the next task after the previous task is completed , The sequence of program execution is consistent with the sequence of tasks 、 synchronous

●   asynchronous : When dealing with a task , This task takes a long time , While dealing with this task , You can do other tasks ( Such as : It takes half an hour to make soup , Then you can wash vegetables, cut vegetables and fry vegetables in this process )

js Execution mechanism

Synchronization task : All execute on the main thread , Form an execution stack

Asynchronous task : Through callback function . The callback functions related to asynchronous tasks are put into the task queue ( It's also called message queuing )

●   1、 Ordinary events , Such as click、resize etc.

●   2、 Resource loading event , Such as load、error etc.

●   3、 Timer , Include setTimeout and setInterval

Mechanism

●   1 、 Perform the synchronization task in the execution stack first

●   2 、 Asynchronous task ( Callback function ) Put it in the task queue

●   3 、 Once the synchronization tasks in the stack are all executed , The system will read the asynchronous tasks in the task queue in order . The read asynchronous task end waiting state , Enter the execution stack and start executing

image.png

image.png

location object

●   window Object provides us with a location attribute Used to get or set the URL, And can be used for parsing URL. Because this property returns an object , So this attribute is also called location object

●   URL: Uniform resource locator (Uniform Resource Locator), Is the address of standard resources on the Internet . Every resource on the Internet has a unique URL, It contains information about the location of the file and how the browser should handle it

image.png

location Object properties

●   location.href Gets or sets the entire URL

●   location.host Back to the host ( domain name ) ( Such as www.itheima.com)

●   location.port Return port number , If it is set, the null character ●   location.pathname Return path

●   location.search Returns the parameter

●   location.hash Return fragment   What follows the pound sign Common at anchors link

●   location Object methods

●   location.assign( ) , Follow href Properties are similar to , You can jump to the page ( Also known as redirection pages )

●   location.replace( ), Replace the current page , Because there's no history , So you can't go back to the page

image.png

●   location.reload( ) , Reload page , amount to F5 Refresh button . The default parameter is null or false, Then refresh directly ; When the parameter is set to true Forced refresh when ( amount to ctrl+f5)

navigator object

●   navigator Object contains a lot of browser information , It has many properties , What we use most is userAgent, This property returns the message sent by the client to the server user-agent The value of the head

image.png

history object

●   window Object provides us with a history object , Interact with browser history . This object contains the user ( In the browser window ) Visited URL

Method

●   history.back( ), Back function

●   history.forward( ), Forward function

●   history.go( Parameters ), Forward and backward function . Parameter is 1, Go to a page ; Parameter is -1, Back one page

copyright notice
author[GTW_ Zeus],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827074535145u.html

Random recommended