1-1 onload是页面加载完毕之后触发

  1. window.onload = function(){
  2. var p =document.getElementById("p");
  3. console.log(p)
  4. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="js/index.js"></script>
  9. </head>
  10. <body>
  11.     <p id="p">hello world</p>
  13. </body>
  14. </html>

1-2 onresize 窗口大小改变时触发

  1.  <script >
  2.         window.onresize = function(){
  3.             console.log("窗口改变了")
  4.         }
  5.     </script>

1-3 onscroll 窗口滚动时触发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         div{
  10.             height: 2500px;
  11.             background-color: aliceblue;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div>
  18.     </div>
  19.     <script>
  20.         window.onscroll = function(){
  21.             console.log(1)
  22.         }
  23.     </script>
  24. </body>
  25. </html>

1-4定时器

  1. <body>
  2.     <script>
  3.         setTimeout(function(){  
  4.             console.log("hello")
  5.         },1000)
  6.         setInterval(function(){
  7.             console.log("world")
  8.         },2000)
  9.     </script>
  10. </body>