BOM overview
BOM (Browser Object Model) is the Browser Object Model. It provides an object that interacts with the browser window independent of content. Its core object is window. BOM consists of a series of related objects, and each object provides many methods and attributes.
What is the difference between DOM and BOM?
DOM is the document object model
DOM treats "document" as an "object"
The top-level object of DOM is document
DOM mainly learns how to manipulate page elements
DOM is the W3C Standard Specification
BOM browser object model
Treat the browser as an object
The top-level object of BOM is window
BOM learns some objects that interact with the browser window
BOM is defined by browser manufacturers on their respective browsers, with poor compatibility
window object is the top-level object of browser, which has dual roles.
1. It is an interface for JS to access the browser window.
2. It is a global object. Variables and functions defined in the global scope will become properties and methods of window objects. When calling, you can omit window. Dialog boxes belong to window object methods, such as alert(), prompt(), etc.
Note: a special attribute under window is window.name
Common events for window objects
- Window load event
window.onload = function(){}
perhaps
window.addEventListener("load",function(){});
window.onload is a window (page) loading event. When the document content is fully loaded, this event will be triggered (including images, script files, CSS files, etc.), and the processing function will be called
With window.onload, you can write the JS code above the page elements, because onload is to execute the processing function after all the page contents are loaded.
The traditional window.onload registration event method can only be written once. If there are multiple events, the last window.onload will prevail.
If you use addEventListener, there are no restrictions
document.addEventListener('DOMContentLoaded',function(){})
When the DOMContentLoaded event is triggered, only when the DOM is loaded, excluding style sheets, pictures, flash, etc.
Ie9 and above are supported. If there are many pictures on the page, it may take a long time from user access to onload trigger, and the interaction effect cannot be realized, which will inevitably affect the user experience. At this time, DOMContentLoaded event is more appropriate.
- Resize window event
window.onresize = function(){}
window.addEventListener("resize",function(){});
This event is triggered whenever the window size changes in pixels.
We often use this event to complete responsive layout. window.innerWidth the width of the current screen
timer
Two timers
setTimeout and setInterval. Next, let's introduce their differences
- When the setTimeout delay time is up, call the callback function, and call it only once to end the timer.
It can be understood as delaying something for a certain time. There is a callback function. We simply understand the callback function as the function called after the last thing is done
element.addEventListener("click", fn); fn of this click event can be understood as a callback function. This function will not be called until this element is clicked
<img src="images/ad.jpg" alt="" class="ad">
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('It exploded');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
This code means to close the image after 5 seconds. There is an operation to stop the timer. We can use clearTimeout! Stopping the timer can reduce the occupied resources and improve the browser speed.
- setInterval calls the callback function every time after this delay. It will be called many times and called repeatedly
<button class="begin">Turn on the timer</button>
<button class="stop">Stop Timer </button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // The global variable null is an empty object
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('ni hao ma');
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
Similarly, we can use clearInterval to clear the timer. Briefly introduce the use of this
The direction of this cannot be determined when the function is defined
Only when the function is executed can we determine who this points to. Generally, this finally points to the object that calls it. At this stage, let's first learn about several this points
In the global scope or ordinary function, this points to the global object window (note that this in the timer points to the window)
Who calls this in the method call
this in the constructor points to an instance of the constructor
<button>click</button>
<script>
// This points to the problem. Generally, the final point of this is the object that calls it
// 1. In the global scope or ordinary function, this points to the global object window (note that this in the timer points to the window)
console.log(this);
function fn() {
console.log(this);
}
window.fn();
window.setTimeout(function() {
console.log(this);
}, 1000);
--------------------------------------------------------------
// 2. In method calls, who calls this points to whom
var o = {
sayHi: function() {
console.log(this); // This points to o this object
}
}
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
// console.log(this); // this refers to the btn button object
// }
btn.addEventListener('click', function() {
console.log(this); // this refers to the btn button object
----------------------------------------------------------------
})
// 3. this in the constructor points to the instance of the constructor
function Fun() {
console.log(this); // this points to the fun instance object
}
var fun = new Fun();
</script>
JS execution mechanism
I was in the past article It has been described in detail in. Here, only the concept of supplementary event loop is introduced
Because the main thread repeatedly obtains, executes, re obtains and re executes tasks, this mechanism is called event loop.
location object
The window object provides us with a location property to obtain or set the URL of the form, and can be used to resolve the URL. Because this property returns an object, we also call this property location object
We use href and search most. For example, the following code means to click and jump to the specified page
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.baidu.cn';
})
<button>click</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// Record browsing history, so you can realize the back function
// location.assign('http://www.baidu.cn');
// The browsing history is not recorded, so the back function cannot be realized
// location.replace('http://www.baidu.cn');
location.reload(true);
})
</script>
navigator object
The navigator object contains information about the browser. It has many properties. The most commonly used property is userAgent, which can return the value of the user agent header sent by the client to the server. The following front-end code can judge which terminal of the user opens the page and jump
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 = ""; //mobile phone
} else {
window.location.href = ""; //computer
}
history object
The window object provides us with a history object to interact with the browser history. This object contains the URL that the user (in the browser window) has visited
