JavaScript の 其他事件

其他事件

页面加载事件

外部资源（图片，外联CSS，JS）加载完毕时触发的事件

事件名称 load

window.addEventListener('load',function(){//等窗口资源都加载完了再去执行函数

})

如果js代码写在了上方，因为下方的html代码还没有被执行，js代码就无法获得有关的数据，此时可以将js代码放到上述代码的函数中，等待window窗口资源都加载完了再去执行js代码就没问题了

页面滚动事件

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

事件名称 scroll

• 涉及到的相关属性

scrollTop（向下滚了多少px） scrollLeft（向右滚了多少px）

• 获取html元素的写法

document.documentElement

• 对整个网页进行滚动事件监听的话

事件监听要加到window上

获取的 scrollTop 要是html元素的

代码如下

let x=document.querySelector('div')
window.addEventListener('scroll',function(){
    let n = document.documentElement.scrollTop
    if(n>=100)
      {
        x.style.display='none'
      }
    else
      {
        x.style.display='block'
      }
        })

• 页面打开时设置页面滚动位置

对 scrollTop 进行赋值即可

页面尺寸事件

在窗口尺寸改变的时候触发事件

事件名称 resize

• 涉及的相关属性

clientWidth 与 clientHeight

获取盒子的可见宽高，也就是 content + padding 部分

元素尺寸与位置

• 涉及的相关属性

1. 获取宽高

offsetWidth 与 offsetHeight

获取盒子的自身宽高，包含到 border

2. 获取位置

offsetLeft 与 offsetTop

获取元素距离自己定位父级元素的左、上距离

注意是只读属性

getBoundingClientRect()

该函数返回的是一个对象，对象里面存储着元素相对于视口的位置