Detailed explanation of JavaScript BOM composition and common events

1. BOM
2. Composition of BOM
2. Common events of window objects

1. Window loading event
2. Adjust window size event

Summarize

1. BOM

1. What is BOM?

BOM (Browser Object Model) is a browser object model that provides objects that interact with the browser window independently of the content. Its core object is window.

The BOM consists of a series of related objects, and each object provides many methods and properties.

BOM lacks standards. The standardization organization for JavaScript syntax is ECMA, and the standardization organization for DOM is W3C. BOM was originally part of the Netscape browser standard.

2. Composition of BOM

As shown in the following figure:

insert image description here

The window object is the top-level object of the browser and it has a dual role.

It is an interface for JS to access the browser window. Another global object. Variables and functions defined in the global scope will become properties and methods of the window object.

Window can be omitted when calling. alert(), prompt(), etc. are all window object methods.

We can call the window object to see what properties and methods it has.

As shown below:

console.log(window);

The intercepted part is as follows:

insert image description here

It can be seen that the variables and functions defined in the global scope will become properties and methods of the window object.

2. Common events of window objects

1. Window loading event

We know that in the execution mechanism of JavaScript, the execution of code is executed in order from top to bottom, so if we want to add a click event to a button, we can only set the button first, and then get the button to operate, as follows:

<body>
    <button>Click</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            alert('You just clicked!')
        }
    </script>
</body>

Click the effect:

insert image description here

If we want to place the bound click event at the front of the page, it is obviously not possible. What should we do then? At this time, we can complete it through our window loading event.

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

window.onload = function(){}
//or window.addEventListener("load",function(){});

As in the example above:

<body>
    <script>
        window.onload = function(){
            var btn = document.querySelector('button');
        btn.onclick = function(){
            alert('You just clicked!')
        }
        }
    </script>
    <button>Click</button>
</body>

The click effect can also be achieved at this time.

insert image description here

It should be noted that:

1. With window.onload , you can write JS code above the page elements, because onload will execute the processing function after all the page contents are loaded.

2. The traditional window.onload event registration method can only be written once. If there are multiple window.onload events, the last one will be used.

3. If you use addEventListener, there is no restriction.

What if we also have a click event at this time and want to put its operation in front of the element?

Let’s try it:

 <script>
        window.onload = function(){
            var btn = document.querySelector('button');
        btn.onclick = function(){
            alert('You clicked again!')
        }
    }
        window.onload = function(){
           alert('Hello')
        }
    </script>
    <button>Click</button>
</body>

What is the print result?

insert image description here

It can be found that the first event will be overwritten by the second event. This is, we can operate in another way, as follows:

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

The code is:

 <script>
        document.addEventListener('DOMContentLoaded',function(){
            var btn = document.querySelector('button');
            btn.onclick = function(){
                alert('You clicked again!')
            }
            alert('Hello')
        })
    </script>
    <button>Click</button>
</body>

The running results are:

insert image description here

The DOMContentLoaded event fires only when the DOM is loaded, excluding stylesheets, images, flash, etc. This method is only supported on Internet Explorer 9 and above. If there are many images on the page, it may take a long time from user access to onload triggering, and the interactive effect cannot be achieved, which will inevitably affect the user experience. At this time, it is more appropriate to use the DOMContentLoaded event.

2. Adjust window size event

On many websites, we will find that when we change the window size, the content inside will also change accordingly. How is this done? Here we will use our window resize event.

Its format is:

//(1)
window.onresize = function(){}
//(2)
window.addEventListener("resize",function(){});

window.onresize is a window resize loading event, and the processing function is called when it is triggered.

For example:

There is a box in the page. When the width of our page is less than 800px, let the color of this box turn purple.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
   <script>
       div = document.querySelector('div')
       window.onresize = function(){
           console.log(window.innerWidth);
           if(window.innerWidth <= 800){
               div.style.backgroundColor = 'green';
           }
       }
   </script>
</body>
</html>

The print result is:

insert image description here

Similarly, we can also perform the above operations through window.addEventListener("resize",function(){}) , which will not be repeated here.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of using javascript to handle common events
Summary of common examples of JS event binding
Introduction to Common JavaScript Events
Detailed explanation of js mobile event basics and common event libraries
A brief discussion on the common methods of JavaScript event binding and their advantages and disadvantages
Learn more about the most commonly used JavaScript events

<<: Pure CSS to achieve the effect of picture blinds display example

>>: MySQL5.7 single instance self-starting service configuration process