当前位置：网站首页>Web APIs DOM page special effects scrolling events and loading events

Web APIs DOM page special effects scrolling events and loading events

2022-07-21 00:48:00 【Dark horse programmer official】

Notes updated in the early stage ： Web API Basic cognition / obtain DOM Elements / Set up / modify DOM Element content and element attributes / Timer - Intermittent function / The basis of the event / Higher order function / Environment object / Comprehensive case -Tab Bar Toggle / DOM node /DOM Time object /DOM Redraw and reflow / DOM- Event object /DOM- Flow of events / DOM- Event delegation + Comprehensive case

One 、 Scroll events and load events

1.1 Scroll Events

Event triggered when the page scrolls

Why learn ？

Many web pages need to detect that users scroll the page to a certain area and do some processing , For example, fixed navigation bar , For example, back to the top

Event name ：scroll

Monitor entire page scrolling ：

to window or document add to scroll event
Listen to the internal scrolling of an element and add it directly to an element

Page scrolling event code ：

<!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> body { height: 3000px; } div { overflow: auto; width: 200px; height: 200px; background-color: pink; } </style>
</head>

<body>
    <div>
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 

    </div>
    <script> let div = document.querySelector('div') window.addEventListener('scroll', function () { console.log(111) }) // div.addEventListener('scroll', function () {
       // console.log(111) // }) </script>
</body>

</html>

1.2 Loading event

Load external resources （ Such as images 、 Outreach CSS and JavaScript etc. ） Event triggered when loading is complete

Why learn ？

Sometimes you need to wait until all the page resources are processed and do something
Old code likes to put script Written in head in , At this time, go straight to dom Element not found

Event name ：load

All resources on the listening page are loaded ：

to window add to load event

Be careful ： You can not only listen to the whole page, but also when the resources are loaded , You can also bind to a resource load event

When the initial HTML After the document is fully loaded and parsed ,DOMContentLoaded Event is triggered , Without waiting for the stylesheet 、 Images, etc. are fully loaded

Event name ：DOMContentLoaded

Monitor page DOM Loading finished ：

to document add to DOMContentLoaded event

Load event code ：

<!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> body { height: 3000px; } div { overflow: auto; width: 200px; height: 200px; background-color: pink; } </style>
    <script> window.addEventListener('load', function () { let div = document.querySelector('div') console.log(div) }) </script>
</head>

<body>
    <div>
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 
         I can put a lot of words in it 

    </div>
    <script> // let div = document.querySelector('div') </script>
</body>

</html>

Summary ：

1. How to add page scrolling events ？

scroll
Listen to the whole page scroll to window or document Add

2. What are the two loading events ？ How to add ？

load event

Listen to the entire page resources to window Add

DOMContentLoaded

to document Add , When the initial HTML The document is fully loaded and parsed after ,DOMContentLoaded Event is triggered , Without waiting for the style surface 、 Images, etc. are fully loaded

Dark horse front-end column has a lot of dry goods , Focus on relearning , It's convenient ~

2022 Front end learning roadmap ： Course 、 Source code 、 note , Technology stack In addition, the circuit diagram is updated in real time ！ Friends who need after-school materials , You can tell me directly .