js-day11 BOM 事件对象 懒加载

BOM

BOM: Browser Object Model 浏览器对象模型

js提供给我们用来操作浏览器的信息的接口

iframes

location

history

document

navigator

....

BOM核心: window

可以直接使用变量名或者函数名就能出线效果的(全局变量、全局函数), 所属对象都是window

对话框

1. 警告框: alert()

2. 带有确定取消按钮的警告框: confirm('提示内容')

3. 带有输入框的对话框: prompt('提示内容', '默认值')

// 1. 警告框: alert()
// alert('是否已经了解清除风险');
​
// 2. 带有确定取消按钮的警告框: confirm('提示内容')
// 接收返回值: 取消: false  确定: true
// var res = confirm('是否已经了解风险');
// console.log(res);
​
// 3. 带有输入框的对话框: prompt('提示内容', '默认值')
// 接收返回值: 取消: null  确定: 输入框的内容
// var res = prompt('请输入要购买的金额', '10000');
// console.log(res);

open与close

如果页面结构html中使用, window不能省略

open: 打开

语法: open(跳转的网址, target, 描述词, 是否替换当前页面在历史记录中的位置)

target: 打开方式 _blank: 新标签页 _self: 当前

描述词: 当前窗口宽高 属性名=属性值,属性名=属性值 只在打开方式是_blank

返回新页面的window

close: 关闭

window对象.close();

js中关闭自己: close();

// 点击第一个按钮 打开uxue官网
var btns = document.querySelectorAll('button');
console.log(btns);
​
var nwin = null;
btns[0].onclick = function () {
    // open('https://www.ujiuye.com');
    // open('https://www.ujiuye.com', '_blank');
    // open('https://www.ujiuye.com', '_self');
    // open('https://www.ujiuye.com', '_self');
    nwin = open('https://www.ujiuye.com', '_blank', 'width=500px,height=500px');
    console.log(nwin);
};
​
btns[2].onclick = function () {
    close();
};
btns[3].onclick = function () {
    nwin.close();
};

location

location是BOM中最有用的对象之一. 既是BOM直接对象, 也是window下的对象

存储相关当前页面的信息: 网址 协议 搜索内容...

// 调试: 打开线上网站 安装插件: live Server
console.log(location);
// https://www.jd.com/
console.log(location.protocol); // 协议 http https file
console.log(location.hostname); // 服务器名称
console.log(location.port); // 端口
console.log(location.host); // 服务器名称 + 端口
console.log(location.pathname); // 文件路径
console.log(location.search); // 搜索内容  ?+后面的内容
console.log(location.hash); // 哈希值 地址后面的散列 #+后面的内容
console.log(location.href); // 完整地址
​
setTimeout(function () {
    // 给href赋值 可以实现页面跳转
    // location.href = 'https://www.baidu.com';
    // window.location.href = 'https://www.baidu.com';
​
​
    // 刷新
    // location.reload();
},3000);

history

history: 历史记录

history.go(数字);

正数: 前进几个页面

负数: 后退几个页面

0: 刷新

history.back(); 回退到上一个页面

history.forward(); 前进到下一个页面

console.log(history);
setTimeout(function () {
    // 前进到02页面
    // history.forward();
    // history.go(2);
    // history.go(0);
}, 3000);

BOM事件

onload

当script标签写在body、页面结构之前的时候 获取元素拿不到正确的元素 去到的是null

原因: 由于代码是从上到下的顺序去执行的 当执行到script的时候页面中还没有元素 所以取不到

解决: 让js代码在页面结构之后

\1. 使用 window.onload 事件: 等待页面和其中的资源(图片、视频...)都加载完成后 在执行其中的代码

window.onload = function () {
    var div = document.querySelector('div');
    console.log(div);
}

onscroll

滚动事件

window.onscroll 事件

window.onscroll = function () {
    console.log('滚了');
};

onresize

窗口大小改变事件

window.onresize = function () {
    console.log('变了');
};

元素三大宽高

client

元素可视宽高 client系列:

clientWidth/clientHeight: 元素的可视宽高 内容 + padding

clientLeft/clientTop: 左/上边框的宽度

屏幕的可视区域的宽高:

document.documentElement.clientWidth/clientHeight

/* 
    元素可视宽高 client系列:
        clientWidth/clientHeight: 元素的可视宽高 内容 + padding
        clientLeft/clientTop: 左/上边框的宽度
*/
console.log(div.clientHeight, div.clientWidth); // 300+20+10=330 200+15+5=220
console.log(div.clientLeft, div.clientTop); // 25  5
​
/* 
    屏幕的可视区域的宽高:
        document.documentElement.clientWidth/clientHeight
*/
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);

offset

offset: 元素的占位宽高

offsetWidth/offsetHeight: 元素的占位宽高 内容 + padding + border

offsetLeft/offasetTop: 元素距离具有定位属性的父元素的左侧/顶部的距离 如果没有定位父元素 就是距离body的距离

console.log(div.offsetWidth, div.offsetHeight); // 200+15+5+25+3=248 300+20+10+5+23=358
console.log(div.offsetLeft, div.offsetTop); // 30 1

scroll

scroll: 滚动距离

scrollHeight/scrollWidth: 元素的实际宽高

scrollTop/scrollLeft: 超出当前页面/元素的距离 滚动卷去的距离

获取页面\窗口的滚动距离:

document.documentElement.scrollTop

document.documentElement.scrollLeft

console.log(div.scrollWidth, div.scrollHeight);
// 通过滚动事件
div.onscroll = function () {
    console.log(div.scrollLeft, div.scrollTop);
};
​
// 获取页面滚动的距离:
window.onscroll = function () {
    console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
};

滚动的距离: scrollTop/scrollLeft可以被赋值 其他的只能获取不能设置

btn.onclick = function () {
    document.documentElement.scrollTop = 0;
};

懒加载

1. 当页面滚动的时候, 判断每一个图片是否在页面的可视范围之内 如果在 img的src被赋值成ntag的值

2. 一进入页面的时候 判断是否有图片需要显示

3. 当页面可视区域的大小发生改变的时候 判断

判断思路:

元素的offsetTop <= window的scrollTop + 屏幕的可视区域的高度

// 1.1 获取元素
var imgs = document.querySelectorAll('img');
console.log(imgs);
// 1.2 页面滚动
window.onscroll = function () {
    auto();
};
​
​
// 2. 一进入页面的时候  判断是否有图片需要显示
auto();
function auto() {
    // 获取滚动距离 和 屏幕的可视区域的高度
    var st = document.documentElement.scrollTop;
    var ch = document.documentElement.clientHeight;
    // 每一个   
    for (var i = 0; i < imgs.length; i++) {
        // console.log(imgs[i].offsetTop);
        if (imgs[i].offsetTop <= st + ch) {
            // img的src被赋值成ntag的值
            // 获取ntag的值
            // console.log(imgs[i].getAttribute('ntag'));
            imgs[i].src = imgs[i].getAttribute('ntag');
        }
    }
};
​
// 3. 当页面可视区域的大小发生改变的时候 判断
window.onresize = function () {
    auto();
}

事件对象

当事件发生的时候, 浏览器将相关当前事件的信息都存在一个对象中, 这个对象就是事件对象

普通: event window.event

低版本ff: 事件处理函数的第一个形参的位置

事件对象兼容: var ev = window.event || evs;

document.onclick = function (evs) {
    // console.log(window.event, evs);
    var ev = window.event || evs;
    console.log(ev);

    console.log(ev.type); // 事件类型
    console.log(ev.target || ev.srcElement); // 事件触发源
    console.log(ev.clientX, ev.clientY); // 鼠标距离屏幕可视区域的左上角的距离
    console.log(ev.screenX, ev.screenY); // 鼠标距离屏幕的左上角的距离
    console.log(ev.pageX, ev.pageY); // 鼠标距离页面左上角的距离
}