JS-BOM Window 对象

6次阅读
没有评论

共计 667 个字符,预计需要花费 2 分钟才能阅读完成。

窗口加载事件

一、

    window.onload = function() {

    }

    window.addEventListener('load', function () {

    })

window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数

  1. 有了 window.onload 就可以把JS代码写道页面元素的上方,因为 onload 是等页面内容完全加载完毕,再去执行处理函数
  2. window.onload 传统注册方式只能写一次,如果有多个,会以最后一个 window.onload 为准
  3. 如果使用 addEventListener 则没有限制

二、

    document.addEventListener('DOMContentLoaded', function () {

    })

DOMContentLoaded 事件触发时,仅当DOM加载完毕,不包括样式表、图片、flash等等

  1. IE9 以上才支持
  2. 如果页面的图片很多的话,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现,必然影响到用户的体验,此时用 DOMContentLoaded 事件比较合适

调整窗口大小事件

    window.onresize = function () {

    }

    window.addEventListener('resize', function () {

    })

window.onresize 是浏览器窗口大小加载事件,当触发时就调用的处理函数

  1. 只要窗口大小发生像素变化,就会触发这个事件
  2. 经常利用这个事件完成响应式布局
  3. window.innerWidth 当前屏幕的宽度

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计667字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码