Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve the BOM operation of JavaScript. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Window object

The core object of BOM is window, which represents an instance of a browser. In the browser, the window object has a dual role. It is not only an interface to access the browser window through JavaScript, but also a Global object specified by ECMAScript. This means that any object, variable, and function defined in a Web page has window as its Global object, and therefore has access to methods such as parseInt ().

Global scope

Because the window object also acts as the Global object in ECMAScript, all variables and functions declared in the global scope become properties and methods of the window object. Let's look at the following example.

We define a variable name and a function sayName () in the global scope, which are automatically assigned to the name of the window object. Thus, you can access the variable name through window.name and the function sayName () through window.sayAge (). Because sayName () exists in the global scope, this.name is mapped to window.name, which still shows the correct result.

Common events

The window object also has some events of its own, here we use the

Document window.addEventListener ('load', function () {var btn = document.querySelector (' button'); btn.addEventListener ('click', function () {alert (' click on me');}); window.addEventListener ('load', function () {alert (22);}) Document.addEventListener ('DOMContentLoaded', function () {alert (33);}); / / load and other page contents have been loaded, including page dom elements, pictures, flash css, etc. / / DOMContentLoaded is DOM loaded, and without pictures falsh css, you can load faster than load. Click to adjust the window size.

For example, in the following case, the box disappears when we zoom the page to 800.

Document div {width: 200px; height: 200px; background-color: pink;} window.addEventListener ('load', function () {var div = document.querySelector (' div'); window.addEventListener ('resize', function () {console.log (window.innerWidth); console.log (' changed'); if (window.innerWidth)

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.