JS基础：其他事件_js其他事件-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80092823/article/details/139219697

页面加载事件

加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件

意义

>有些时候需要等页面资源全部处理完了做一些事情

>老代码喜欢把script写在head中，这时候直接找dom元素找不到

事件名：load

监听页面所有资源加载完毕：

>给window添加load事件

//页面加载事件
window.addEventListener('load',function（）{
//执行的操作
})

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件。

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕：

给document添加DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function（）{
        //(执行的操作)
})

总结

1.页面加载事件有哪两个?

load事件监听整个页面资源给window加

2.如何添加DOMContentLoaded？

给document加
无需等待样式表、图像等完全加载

页面滚动事件

滚动条在滚动的时候持续触发的事件

意义

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：

//页面滚动事件
window.addEventListener('scroll',function(){
        //执行的操作
})

页面滚动事件-获取位置

scrollLeft和scrollTop(属性)

获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的

尽量在scroll事件里面获取被卷去的距离
```
div.addEventListener('scroll',function{
        console.log(this.scrollTop)
})
```
可参考下面图片直观理解总结

总结

1.被卷去的头部或者左侧用那个属性，是否可以读取和修改?

scrollTop/scrollLeft
可以读取，也可以修改(赋值)

2.检测页面滚动的头部距离（被卷去的头部）用那个属性?

document.documentElement.scrollTop

页面滚动事件-滚动到指定的坐标

scrollTo()方法可把内容滚动到指定的坐标
语法：元素.scrollTo(x,y)

//让页面滚动到y轴1000像素的位置
window.scrollTo(0,1000)

页面尺寸事件

获取宽高：

获取元素的可见部分宽高(不包含边框，margin，滚动条等)。
clientWidth和clientHeight。例如先设置一个宽高分别为200px的div


  <style>
   div {
     height: 200px;
     width: 200px;
     background-color: pink;
   }
 </style>
/head>
body>
 <div></div>
 <script>
   const div = document.querySelector('div')
   console.log(div.clientWidth);
  
 </script>
/body>

最后log打印出来是200

 <style>
   div {
     height: 200px;
     width: 200px;
     padding: 10px;
     background-color: pink;
   }
 </style>

当添加了padding值之后log打印出来是220，加margin后还是220

由此可见：clientWidt包含padding不包含margin和border

用途：

当给一个行内块元素不给width，只有文字的情况下，可以用clientWidt直接测定width值


  <style>
    div {
      display: inline-block;
      height: 200px;
      padding: 10px;
      margin: 10px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div>adsvs;jhj;ohn;</div>
  <script>
    const div = document.querySelector('div')
    console.log(div.clientWidth);

元素尺寸位置

获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值，方便计算
注意：获取的是可视宽高,如果盒子是隐藏的,获取的结果是0

获取位置：

获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop注意是只读属性

总结

1.offsetWidth和offsetHeight是得到元素什么的宽高?

内容+padding+border

2.offsetTop和offsetLeft得到位置以谁为准?

带有定位的父级
如果都没有则以文档左上角为准

获取位置方法二：

.element.getBoundingClientRect()

返回元素的大小及其相对于视口的位置

总结：

属性	作用	说明
scrollLeft和scrollTop	被卷去的头部和左侧	配合页面滚动来用，可读写
clientWidth和clientHeight	获得元素宽度和高度	不包含border，margin，滚动条。用于js获取元素大小，只读属性
offsetWidth和offsetHeight	获得元素宽度和高度	包含border、padding，滚动条等，只读
offsetLeft和offsetTop	获取元素距离自己定位父级级元素的左、上距离	获取元素位置的时候使用，只读属性