js中的BOM事件1.浏览器版本信息(了解) window中的navigator可以获取到浏览器的信息 2.浏览器的on

1.浏览器版本信息(了解)

window中的navigator可以获取到浏览器的信息

这个事件会在页面所有资源加载完毕后执行

语法:window.onload = function(){ 我的代码全部书写到这个函数内部}

在浏览器中,把js写在head中,在js,下边的body标签还没来得及加载

可能会导致我们获取body内的标签

如果把代码放到onload中就不会出现这个问题

如果把js写在body底部,写不写onload都无所谓

当前浏览器的滚动条滚动时会触发该事件,或者鼠标滚轮滚动时 (前提是有滚动条)

语法: window.onscroll = function () { 代码写在这个函数内 }

其实浏览器并没有滚动,而是内部页面在滚动

所以我们这里就不能使用window对象,而是使用document对象

window.onscroll = function () {
            console.log('body: ', document.body.scrollTop)
        }
复制代码

window.onscroll = function () {

console.log('documentElement: ', document.documentElement.scrollTop)
        }
复制代码

Ie浏览器在没有(声明文件类型)时语法1与语法2都可以,在没有声明时只能用语法2

chorme(谷歌),FireFox(火狐)在没有(声明文件类型)时用语法1,反之用语法2

Safari(苹果) 这两个语法都不用, 使用一个单独的方法 window.pageYOffset

获取的是页面向左的滚动距离

window.onscroll = function () { console.log('body: ', document.body.scrollLeft) }

window.onscroll = function () { console.log('documentElement: ', document.documentElement.scrollLeft) }

区别参考 scrollTop