js基础篇 10 更多事件更多事件对象更多元素方法 BOM this的指向 js执行机制 location navigator history

本文链接：https://blog.csdn.net/qilie_32/article/details/114273573

10 更多事件更多事件对象更多元素方法 BOM this的指向 js执行机制 location navigator history

BOM

介绍

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window
BOM有一系列相关对象组成，并且每个对象都提供了很多方法和属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

在这里插入图片描述

顶级对象window

所有全局的变量和函数都会变成window的属性和方法

不仅如此，window还包含着document，location，navigation，screen，history

窗口加载事件

load

script标签一般位于body标签的最下方，原因是因为加载是按标签顺序来加载的，如果使用onload事件则可以将script标签位于任意位置。

onload事件是等页面内容全部加载完毕再去执行处理函数
传统注册事件只能写一次，多个只生效最后一个所以应当善用addEventListener

例子

window.addEventListener('load', function() {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        alert('点击我');
    })
})

DOMContentLoaded

DOMContentLoaded事件在DOM加载后触发，此时样式表，图片，flash等未必加载完成

有兼容性问题 ie 9以上支持

如果页面的样式表，图片，flash很多的话，从用户访问到onload触发可能需要较长的事件，交互不能实现必然影响体验，此时就应当使用DOMContentLoaded

例子

document.addEventListener('DOMContentLoaded', function() {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        alert('点击我');
    })
})

调整窗口大小事件

resize

当窗口被调整大小时触发

setTimeout

语法规范： window.setTimeout(调用函数, 延时时间);

这个window在调用的时候可以省略
这个延时时间单位是毫秒但是可以省略，如果省略默认的是0
这个调用函数可以直接写函数还可以写函数名还有一个写法 ‘函数名()’，但这种做法我们不推荐
页面中可能有很多的定时器，我们经常给定时器加标识符（名字)

clearTimeout(timer)

清除setTimeout定时器

setInterval

语法规范： window.setInterval(调用函数, 延时时间);

clearInterval(timer)

清除setInterval定时器

setTimeout、setInterval补充

setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

例子

手机号码： <input type="number"> <button>发送</button>
<script>
    // 按钮点击之后，会禁用 disabled 为true 
    // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
    // 里面秒数是有变化的，因此需要用到定时器
    // 定义一个变量，在定时器里面，不断递减
    // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
    var btn = document.querySelector('button');
    var time = 3; // 定义剩下的秒数
    btn.addEventListener('click', function() {
        btn.disabled = true;
        var timer = setInterval(function() {
            if (time == 0) {
                // 清除定时器和复原按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
            } else {
                btn.innerHTML = '还剩下' + time + '秒';
                time--;
            }
        }, 1000);
    })
</script>

补充

disabled=false可以使button不可点击

this的指向

this 指向问题一般情况下this的最终指向的是那个调用它的对象

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

例子

//1 window
console.log(this);
function fn() {
    console.log(this);

}
window.fn();
window.setTimeout(function() {
    console.log(this);
}, 1000);
// 2 方法调用中谁调用this指向谁
var o = {
    sayHi: function() {
      	console.log(this); // this指向的是 o 这个对象
    }
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function() {
     console.log(this); // this指向的是btn这个按钮对象
}
btn.addEventListener('click', function() {
    console.log(this); // this指向的是btn这个按钮对象
})
// 3. 构造函数中this指向构造函数的实例
function Fun() {
    console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();

js执行机制

同步任务

同步任务都在主线程执行，形成一个执行栈

异步任务

js异步是通过回调函数实现的

一般而言异步任务有以下三种类型

普通事件如click、resize等
资源加载如load、error等
定时器，包括setInterval、setTimeout等

放到任务队列中

location

常用属性以及方法

location.href

获取或者设置url

location.host

返回主机(域名)

location.port

返回端口号如果未写返回空字符串

location.pathname

返回路径

location.search

返回参数

location.hash

返回片段（#后面的内容）

location.assign(url)

和href一样，可以跳转页面（重定向）记录浏览历史，所以可以实现后退功能

例子

location.assign('http://www.itcast.cn');

location.replace(url)

替换当前页面，不记录浏览历史，所以不可以实现后退功能

例子

location.replace('http://www.itcast.cn');

location.reload()

重新加载页面，相当于刷新，如果里面有参数true，则为强制刷新

获取url参数

步骤

前提

需要一个get请求发向需要获取url参数的html 例：url=http://127.0.0.1:8848/index.html

<form action="index.html">
    用户名： <input type="text" name="uname">
    <input type="submit" value="登录">
</form>

例：输入biang并登录

操作

url=http://127.0.0.1:8848/index.html?uname=biang

先去掉url中的？ substr(‘起始的位置’，截取几个字符);

console.log(location.search); //?uname=biang
var params = location.search.substr(1); 
console.log(params);// uname=biang

利用=把字符串分割为数组 split(’=’);

uservar arr = params.split('=');
console.log(arr); // ["uname", "biang"]

把数据写入div中

var div = document.querySelector('div');
div.innerHTML = arr[1] + '欢迎您';

navigator

userAgent

以下来自百度百科

用户代理，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

常见用法

在这里插入图片描述

history

用于于浏览器历史记录进行交互

back()

可以回退功能

forward()

前进功能

go(index)

前进后退功能参数如果是1则前进1个界面如果是-1则回退1个界面