javaScript之BOM

Posted 2020-09-24

1. window对象:
打开和关闭窗口
window对象的属性
2. *****动画:

1. window对象:
2个角色:
1. 代替Global，充当全局对象
2. 封装浏览器窗口的属性，提供操作浏览器窗口的API

打开和关闭窗口:
打开：window.open("url","name")
name属性: 内存中唯一标识一个窗口对象的名称
浏览器规定: 同一个name名称的窗口只能打开一个
第二个打开的同名窗口会替换先打开的
内置备选项: _self _blank(默认)
还可自定义name属性

1. 打开一个超链接:
1. 在当前窗口打开，允许后退
html: <a href="url"></a>
js: window.open("url","_self");
2. 在当前窗口打开，禁止后退
js:
3. 在新窗口打开，允许打开多个
html: <a href="url" target="_blank"></a>
js: window.open("url"/*,"_blank"*/)
4. 在新窗口打开，只允许打开一个
html: <a href="url" target="自定义name"></a>
js: window.open("url","自定义name")

window对象的属性和方法：
1. 打开新窗口时，可设置新窗口的大小和位置:
var newWin=window.open("url","name",config);
其中: config="top=?,
left=?,
width=?,
height=?,
resizable=yes,
location=no"
newWin：获得的就是新窗口的window对象
用法和window完全一样！
2. 获得窗口的大小:
1. 完整大小:
window.outerWidth
window.outerHeight
2. 文档显示区大小:
window.innerWidth
window.innerHeight
3. 设置窗口大小:
window.resizeTo(newWidth,newHeight)
window.resizeBy(增加的Width,增加的Height)
4. 设置窗口的位置:
window.moveTo(newLeft,newTop)
window.moveBy(增加的left,增加的top)

5.获取屏幕大小:
screen.width
screen.height
6.获取屏幕的可用大小:去掉任务栏剩余的大小:
screen.availWidth:
screen.availHeight:

*定时器

1. 什么是定时器: 让程序每隔一段时间间隔，反复执行同一项任务。
何时使用: 只要希望程序每隔一段时间间隔，反复执行任务
如何使用: 3要素:
周期性定时器:
1. ***任务函数: 定义了定时器需要反复执行的任务
强调: 只有提前验证是正确的函数，才可放入定时器
2. 何时启动定时器:
timer=setInterval(taskFun,interval);
强调: taskFun：提前定义好的函数对象。
启动定时器时，是将taskFun函数作为对象传递给定时器。*不加()*
timer: setInterval会返回当前启动的定时器的序号。序号从1开始，连续不重复。
timer准用于停止定时器时使用
timer不要使用局部变量，因为启动定时器和关闭定时器往往不是同一个函数
3. 何时停止定时器: 2种办法:
1. 手动停止定时器:
clearInterval(timer);
timer=null;//清除timer，总是好的习惯
2. 自动停止定时器:
周期型定时器中，任务函数要判断何时停止定时器

定时器的原理:
1. 启动定时器时:主程序将taskFun作为参数传递给定时器对象.
2. 运行时: 定时器对象会按照提前设定的时间间隔，将taskFun放入callback queue(回调队列)等待调用。
3. 只有等待ECS中主程序都执行完，才调用callback queue中的函数。
鄙视题:
for(var i=0;i<3;i++){

setTimeout("console.log(i)",0);

}
其实定时器的任务也可以是一条js语句字符串

一次性定时器: 先等待一段时间，再执行一次任务，自动结束
何时使用: 1. 如果一个任务，需要等待一段时间后，只执行一次。
2. 如果一个效果频繁启动和停止时，尽量用一次性定时器，代替周期性定时器。
如何使用: 用法同周期性定时器:
vs 周期性: 周期性定时器的任务内部，需要考虑何时停止。
一次性定时器的任务，需要考虑何时启动。
启动: timer=setTimeout(taskFun,interval)
停止: clearTimeout(timer); timer=null;

总结: 性能: 周期性定时器，创建一个定时器对象，反复使用——效率高
一次性定时器，每次执行都重新创建一个定时器对象——效率低

 

** navigator、history  、location  、*****event

1. navigator: 保存浏览器配置信息的对象
navigator.cookieEnabled: 获取是否启用了cookie
navigator.plugins: 保存所有插件信息的集合
navigator.userAgent: 保存浏览器版本信息的字符串

2. history: 保存当前窗口打开后，访问过的url的历史记录栈
模拟前进和后退按钮:
history.go(n): n如果为正，前进
为负，后退
n表示前进后退的次数
3. location: 封装当前窗口正在打开的url地址信息
location.href="新url"; 会在当前窗口打开新url
其实.href可省略
location.assign("新url")->等效于location.href

location.replace("新url"): 在当前窗口打开新url，但替换history中原url，从而禁止后退

刷新页面:
location.reload(true/false):
false: 如果在上次请求后，服务器硬盘页面没有被修改
则直接从服务器缓存中获取页面
true: 每次必须从服务器硬盘获取新页面。绕过缓存。

4. *****event
事件: 浏览器自动触发或用户手动触发的元素状态的改变
事件处理函数: onXXX 在事件发生时自动调用的函数
事件对象: event 在事件发生时自动创建的封装事件信息的对象。
事件对象中的信息包括: 键盘号，鼠标坐标。。。

如何绑定事件处理函数: 2种:
1. 用html属性:
<elem on事件名="js语句"...
原理：
elem.on事件名=function(){
eval("js语句");
}
比如: <button id="btn" onclick="fun()"
elem.onclick=function(){
eval("fun()");//fun()中的this->window
}//window
再比如:
<button id="btn" onclick="alert(this.id)"
btn.onclick=function(){
eval("alert(this.id)");//this->btn
}//btn
执行时:elem.on事件名()

问题: 1. 不符合内容与程序分离的要求
——不可重用，不易于维护
2. 一个事件只能绑定一个处理函数对象！

2. 在js中动态绑定: 2种:
1. 一个事件仅绑定一个处理函数对象:
elem.on事件名=function(){//this->elem
事件的操作
}
执行: elem.on事件名();
解决: 1. 内容与程序分离->代码重用，便于维护
未解决: 1. 一件事只能绑定一个事件处理函数对象

移除事件处理函数: elem.on事件名=null;

2. 一个事件同时绑定多个处理函数对象:
elem.addEventListener("事件名",fun1,?);
elem.addEventListener("事件名",fun2,?);
解决: 1. 一件事绑定多个事件处理函数

移除事件处理函数:
elem.removeEventListener("事件名",fun,?)

 

1.*****event
事件绑定:
DOM: elem.addEventListener(
"事件名",函数对象,是否在捕获阶段提前触发);
优点：1. 一个事件可同时绑定多个处理函数对象
2. 可修改事件触发的顺序，通过修改第三个参数
3. 可删除事件处理函数:
elem.removeEventListener(‘事件名‘,函数对象,xxx)
第三个参数:
IE8: elem.attachEvent(‘on事件名‘,函数对象)

***事件周期: 事件触发的阶段
DOM: 3个阶段: 捕获(外向内),目标触发,冒泡(内向外)
IE8: 2个阶段: 目标触发,冒泡(内向外)

如何获得事件对象event:
DOM: 事件对象自动作为事件处理函数的第一个参数传入
IE8: window.event，不再传入事件对象参数
function 事件处理函数(e){//DOM
e=e||window.event;//IE8
}
取消冒泡:
DOM: e.stopPropagation();
IE8: e.cancelBubble=true;
兼容: if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
利用冒泡:
优化: 如果多个子元素，绑定了相同的事件
应该仅在父元素定义绑定一次事件处理函数即可
为什么: 网页中，绑定的事件处理函数的个数越少，页面运行效率就越高！

this vs target:
this: 当前触发事件的对象，随事件冒泡而改变
target: 最初触发事件的目标对象，
不随冒泡而改变

如何利用冒泡:
1. 获取目标对象:
DOM: e.target
IE8: e.srcElement
兼容模式: var target=e.target||e.srcElement
2. 根据目标对象的不同，执行不同操作

如何取消事件: 中止当前事件的继续执行
1. js中动态绑定事件
DOM: e.preventDefault();
IE8: e.returnValue=false;
兼容模式:
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
强调: 也可以取消在html属性中绑定的事件处理函数
需要在html属性中显式传入event参数
2. html属性中绑定事件:
任何事件处理函数，要想取消，只要返回false即可！
2个return:
1. 在事件处理函数的结尾 return true/false
2. 在html属性上: onXXX="return fun()"

事件发生时，鼠标的坐标:
1. 相对于整个屏幕左上角的坐标:
e.screenX;e.screenY
2. 相对于文档显示区左上角的坐标:
DOM:e.clientX;e.clientY
IE8:e.x;e.y
兼容: var x=e.x||e.clientX;
var y=e.y||e.clientY;
3. 相对于父元素左上角的坐标
e.offsetX; e.offsetY;