BOM (1): common events and timers of window objects

BOM introduction

BOM is the browser object model, which provides objects that interact with the browser window independently of the content, and its core object is window.

Composition of BOM

Common events of the window object

1. Window loading event
traditional way of writing

window.onload = function(){}

event monitoring

window.addEventListener(“load”,function(){});

window.onload is a window (page) loading event. When the document content is fully loaded, the event will be triggered (including images, script files, CSS files, etc.), and the processing function will be called.

Notice:

• With window.onload, the JS code can be written above the page elements, because onload waits for all the page content to be loaded before executing the processing function.
• window.onload The traditional registration event method can only be written once, if there are more than one, the last window.onload will prevail.
• No limit if using addEventListener

For example:

If the get button element in the script is written above the button at this time, the warning box will not pop up after clicking, because the browser reads the code from top to bottom .

Example 2:

But if the script is added to window.onload, the warning box will still pop up when the button is clicked at this time. The reason is that window.onload reads the script after all the elements on the page are loaded. This traditional method will be based on the last window.onload , if you want multiple trigger events, use event monitoring

Example 3: Using event monitoring method

The effect is: first pop-up click 1, then pop-up click 2

DOMContentLoaded method:

document.addEventListener(‘DOMContentLoaded’,function(){})

• When the DOMContentLoaded event fires, only when the DOM is loaded, excluding style sheets, images, flash, etc.
• Ie9 and above are only supported
• If there are many pictures on the page, it may take a long time from user access to onload trigger, and the interactive effect cannot be realized, which will inevitably affect the user experience. At this time, it is more appropriate to use the DOMContentLoaded event.

For example:

22 pops up first, then 11 pops up.
Reason: load and other page content are all loaded, including page dom elements, pictures, flash, css, etc. DOMContentLoaded means that the DOM is loaded, and it does not contain pictures, falsh, css, etc., and the loading speed can be executed faster than loading.

2. Adjust the window size event
traditional way

window.onresize = function(){}

Listening to events

window.addEventListener(“resize”,function(){});

window.onresize is a window resize loading event, which will be called when triggered.

For example:

Notice:

• This event is fired whenever the window size changes in pixels.
• Use this event to complete responsive layout. window.innerWidth the width of the current screen

timer

1.setTimeout() timer

window.setTimeout(call function, [delay in milliseconds]);

• The setTimeout() method is used to set a timer (runs only once) that executes the calling function after the timer expires.
• window can be omitted.
• This calling function can directly write the function, or write the function name or take three forms of the string 'function name ()'. The third is not recommended
• The number of milliseconds of the delay is omitted and the default is 0. If written, it must be milliseconds.
• There may be many timers, and an identifier is often assigned to the timer. (Give the timer a variable name)
• 1000 milliseconds equals one second

2. Stop the setTimeout() timer

window.clearTimeout(timeoutID)

The clearTimeout() method cancels a timer previously established by calling setTimeout().

Notice:

• window can be omitted.
• The parameter inside is the identifier of the timer.

3. setInterval() timer

window.setInterval(callback function, [interval milliseconds]);

The setInterval() method calls a function repeatedly, and calls the callback function every time.

Notice:

• window can be omitted.
• This calling function can write the function directly, or write the function name, or take three forms of the string 'function name()'.
• The number of milliseconds in the interval is omitted and the default is 0. If it is written, it must be milliseconds, which means that this function will be called automatically every milliseconds.
• Because there may be many timers, we often assign an identifier to the timer.
• The first execution is also executed after an interval of milliseconds, and then executed every milliseconds.
• setInterval is to call the function repeatedly, and the previous setTimeout is only called once
  
  4. Stop the setInterval() timer

window.clearInterval(intervalID);

The clearInterval() method cancels a timer previously established by calling setInterval().

Notice:

• window can be omitted.
• The parameter inside is the identifier of the timer.
  
  

location object

The window object provides a location property used to get or set the URL of the form, and can be used to resolve the URL. Because this property returns an object, we also refer to this property as the location object.

1. URL
Uniform Resource Locator (Uniform Resource Locator, URL) is the address of a standard resource on the Internet. Every file on the Internet has a unique URL, which contains information indicating where the file is located and what the browser should do with it.

The general syntax for a URL is:

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

2. Properties of the location object

Case: Automatically jump to the page after 5 seconds
Case analysis:

• Use the timer to do the countdown effect when the time is up, just jump to the page.
• Use location.href

The function of the action attribute is: after the form is submitted, the form data is sent to the specified location, and the value in the name is used as a parameter to pass.
After clicking the login button, the value uname of name is passed to location.search of the second page

3. The method of the location object

Click to return to the original page

load page function

navigator object

The navigator object contains information about the browser, and it has many attributes. The most commonly used one is userAgent, which returns the value of the user-agent header sent by the client to the server.

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    
    
    window.location.href = "";     //手机
 } else {
    
    
    window.location.href = "";     //电脑
 }

history object

The window object provides us with a history object to interact with the browser history. This object contains URLs that the user has visited (in a browser window).