Detailed explanation of JavaScript BOM composition and common events

Detailed explanation of JavaScript BOM composition and common events

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

Recommend

Solution to the problem that Java cannot connect to MySQL 8.0

This article shares a collection of Java problems...

MySQL whole table encryption solution keyring_file detailed explanation

illustrate MySql Community Edition supports table...

Detailed explanation of the infinite restart problem when running the SpringBoot project docker environment

Maybe I started to think wrongly, and my descript...

Solution to the problem that synchronous replication errors cannot be skipped in MySQL5.6 GTID mode

Database version: mysql> select version(); +--...

Teach you how to make cool barcode effects

statement : This article teaches you how to imple...

In-depth understanding of the creation and implementation of servlets in tomcat

1. What is a servlet 1.1. Explain in official wor...

Usage of if judgment in HTML

In the process of Django web development, when wr...

DOCTYPE type detailed introduction

<br />We usually declare DOCTYPE in HTML in ...

Nginx reverse proxy configuration removes prefix

When using nginx as a reverse proxy, you can simp...

MySQL 5.6.15 installation and configuration method graphic tutorial under Windows 8

MySQL is a database that I like very much. Today,...

CentOS6.8 uses cmake to install MySQL5.7.18

Referring to the online information, I used cmake...

Knowledge about MySQL Memory storage engine

Knowledge points about Memory storage engine The ...

Some pitfalls of JavaScript deep copy

Preface When I went to an interview at a company ...

Detailed analysis of SQL execution steps

Detailed analysis of SQL execution steps Let'...

You may not know these things about Mysql auto-increment id

Introduction: When using MySQL to create a table,...