16javascript4其他事件

1页面加载事件

 

事件名：load

用于加载外部资源，如图片，外联css和javascript 加载完毕时触发的事件

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

给window添加load事件

window.addEventListener('load',function(){
//执行的 *** 作
})

1.2监听页面DOM加载完毕：给document添加DOMContentLoaded事件

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

document.addEventListener('DOMContentLoaded),function(){
//执行 *** 作
})

  // 要等所有文件样式全部加载完成，才会运行
  window.addEventListener('load',function(){
    const btn =document.querySelector('button')
    btn.addEventListener('click',function(){
      console.log(111)
    })
  })


  // 加载完html文件即可开始加载此文件
  document.addEventListener('DOMContentLoaded',function(){
    const btn =document.querySelector('button')
    btn.addEventListener('click',function(){
      console.log('222');
    })
  })

2页面滚动事件

事件名：scroll 监听整个页面滚动

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

window.addEventListener('scroll',function(){
//执行的 *** 作
})

 


  
123
  
 

页面滚动事件中的属性

scrollLeft和scrollTop  获取被卷去的大小，获取元素内容往左，往上滚出去看不到的属性，两个值都是可读写的。

 body{
    width: 3000px;
    height: 3000px;
    background-color: pink;

  }

scrollTo（）把内容滚动到指定的坐标

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

  

  
  
返回顶部
  
  

点击后返回指定位置

页面尺寸事件 

事件名：resize 会在窗口尺寸发生改变时触发事件。

window.addEventListener('resize',function(){
//执行的代码
})

宽高：

clientWidth和clientHeight 获取元素的可见部分宽高（不包含边框，margin，滚动条等）

offsetWidth和offsetHeight 获取元素自身宽高，包含元素自身设置的宽高，padding，border

获取出来的是数值，方便计算，获取的是可是宽高，如果盒子是隐藏的，获取的结果是0，

获取位置：

获取元素距离自己定位父级元素的左，上距离,如果没有带定位的父级，则以文档左上角为准。

offsetLeft和offsetTop

这两个元素是只读属性。

 

 element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置（object）

div{
  position: absolute;
  width:300px;
  height:300px;
  background-color: pink;
  left:50%;
  top:50%;

  transform:translateX(-50%);

}