JS-BOM和事件
2020-04-29 15:53:17 5 举报AI智能生成
个人前端学习
作者其他创作
大纲/内容
事件
什么是事件？
事件是可以被javascript侦测到的行为，通俗的讲用户与web页面进行某些交互时，解释器就会创建响应event对象以描述事件信息。
点击事件，登录，用户与web页面交互，就会执行一段程序，就是事件。鼠标经过，元素加载完成失败，浏览器窗口缩放，用户按下键盘，用户滚动窗口等等。
事件是可以被javascript侦测到的行为，通俗的讲用户与web页面进行某些交互时，解释器就会创建响应event对象以描述事件信息。
点击事件，登录，用户与web页面交互，就会执行一段程序，就是事件。鼠标经过，元素加载完成失败，浏览器窗口缩放，用户按下键盘，用户滚动窗口等等。
事件的定义
为特定事件定义监听函数有三种方式：
为特定事件定义监听函数有三种方式：
1、直接在HTML中定义元素的事件相关属性
<button onclick="alert('hello')">按钮</button>
缺点：违反了“内容与行为相分离”的原则，应尽可能的少用
<button onclick="alert('hello')">按钮</button>
缺点：违反了“内容与行为相分离”的原则，应尽可能的少用
2、DOM0级事件
在JavaScript中为元素的事件相关属性赋值：
document.getElementById("btn").onclick=function(){}
document.body.onload=init
function init(){}
缺点：此语法实现了“内容与行为相分离”，但元素仍只能绑定一个监听函数。
在JavaScript中为元素的事件相关属性赋值：
document.getElementById("btn").onclick=function(){}
document.body.onload=init
function init(){}
缺点：此语法实现了“内容与行为相分离”，但元素仍只能绑定一个监听函数。
3.DOM2级事件
高级事件处理方式，一个事件可以绑定多个监听函数：
btn.addEventListener("click", function(){},false); // DOM
btn.attachEvent("onclick", function(){});//IE
document.body.addEventListener("load", init);
document.body.attachEvent("onload", init);
function init(){}此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容性问题。
高级事件处理方式，一个事件可以绑定多个监听函数：
btn.addEventListener("click", function(){},false); // DOM
btn.attachEvent("onclick", function(){});//IE
document.body.addEventListener("load", init);
document.body.attachEvent("onload", init);
function init(){}此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容性问题。
DOM0级和DOM2级区别：
1.DOM2支持同一dom元素注册多个同种事件
2.DOM2新增了捕获和冒泡的概念。
1.DOM2支持同一dom元素注册多个同种事件
2.DOM2新增了捕获和冒泡的概念。
DOM 0 级事件 与 DOM 2 级事件 的区别 ——
1、 DOM 0 级事件绑定，只能给一个元素的某一个行为绑定一次方法，第二次绑定会把前面的覆盖掉 ；
2、 DOM 2 级事件绑定，可以给某一个元素的同一个行为绑定多个不同的方法 ；
1、 DOM 0 级事件绑定，只能给一个元素的某一个行为绑定一次方法，第二次绑定会把前面的覆盖掉 ；
2、 DOM 2 级事件绑定，可以给某一个元素的同一个行为绑定多个不同的方法 ；
为什么会有3种事件捕获方式
1、html中定义 html中写js代码。缺点：强耦合（html文件和js文件绑在一起），不利于复用代码（一般已经不适用了）
2、Dom0级事件，即事件对象的属性添加绑定事件（btn.onclick） 优点：松耦合，html与js的代码分离。缺点：就是只能绑定一个事件类型（最后一个事件会把前面的事件都覆盖了）。
3、Dom2级事件，通过addEventListener函数绑定事件 优点：松耦合，绑定多个事件（比如鼠标点击事件，会在第一个事件弹出后，后面事件依次点击弹出）（以后以这个Dom2级事件为主），该语法可以为一个元素绑定多个监听函数，但是需要注意浏览器的兼容性问题。
1、html中定义 html中写js代码。缺点：强耦合（html文件和js文件绑在一起），不利于复用代码（一般已经不适用了）
2、Dom0级事件，即事件对象的属性添加绑定事件（btn.onclick） 优点：松耦合，html与js的代码分离。缺点：就是只能绑定一个事件类型（最后一个事件会把前面的事件都覆盖了）。
3、Dom2级事件，通过addEventListener函数绑定事件 优点：松耦合，绑定多个事件（比如鼠标点击事件，会在第一个事件弹出后，后面事件依次点击弹出）（以后以这个Dom2级事件为主），该语法可以为一个元素绑定多个监听函数，但是需要注意浏览器的兼容性问题。
绑定事件三步法：
1、创建事件对象，如button
2、给事件对象绑定一个事件类型 如，点击、鼠标滑过、键盘输入等
3、添加事件句柄 如，函数，属性值
onclick="alert("我被点击了")"或者如图写一个function(){ }
1、创建事件对象，如button
2、给事件对象绑定一个事件类型 如，点击、鼠标滑过、键盘输入等
3、添加事件句柄 如，函数，属性值
onclick="alert("我被点击了")"或者如图写一个function(){ }
DOM2级事件：
（1）绑定事件：addEventListener(event,fn,onOff);
（2）解绑事件：removeEventListener(event,fn,onOff);
（1）绑定事件：addEventListener(event,fn,onOff);
（2）解绑事件：removeEventListener(event,fn,onOff);
监听方法 —— 【存在浏览器的差别】
1、addEventListener（）和 removeEventListener （） --> -->非 IE 浏览器
【功能】
addEventListener（）：可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用 。
removeEventListener （）：移除事件处理程序，但无法移除匿名添加的函数 。
【参数】
第一个参数：事件名 ； 第二个参数：事件处理程序函数 ；
第三个参数 ：布尔值，true 表示在捕获阶段调用， false 表示在冒泡阶段调用（IE 冒泡事件流，从里往外冒 ；其他 捕获事件流）
1、addEventListener（）和 removeEventListener （） --> -->非 IE 浏览器
【功能】
addEventListener（）：可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用 。
removeEventListener （）：移除事件处理程序，但无法移除匿名添加的函数 。
【参数】
第一个参数：事件名 ； 第二个参数：事件处理程序函数 ；
第三个参数 ：布尔值，true 表示在捕获阶段调用， false 表示在冒泡阶段调用（IE 冒泡事件流，从里往外冒 ；其他 捕获事件流）
2、DOM 2 级事件流：包含三个阶段，①事件捕获阶段；②事件目标阶段；③事件冒泡阶段；
3、attachEvent（）和 detachEvent（） --> --> IE 浏览器
【功能】
attachEvent（）：可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用 ；
detachEvent（）：移除事件处理程序，但不能移除匿名添加的函数 ；
【参数】
第一个参数：事件名 ； 第二个参数：事件处理程序函数 ；
【功能】
attachEvent（）：可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用 ；
detachEvent（）：移除事件处理程序，但不能移除匿名添加的函数 ；
【参数】
第一个参数：事件名 ； 第二个参数：事件处理程序函数 ；
跨浏览器事件处理程序
IE事件流（了解）
IE事件处理程序【属于DOM2级事件】
添加事件流：AttachEvent()
语法：elemen.attachEvent(event,function)
功能：用于向指定元素添加事件句柄
参数：
event：必须。字符串，指定事件名，必须加“on”前缀。
function：必须。指定事件触发时要执行的函数。
添加事件流：AttachEvent()
语法：elemen.attachEvent(event,function)
功能：用于向指定元素添加事件句柄
参数：
event：必须。字符串，指定事件名，必须加“on”前缀。
function：必须。指定事件触发时要执行的函数。
移除事件：
detachEvent()
语法：element.detachEvent（event,function）
功能：移除attachEvent()方法添加的事件句柄。
参数：
event：必须。字符串，要移除的事件名称。
function：必须。指定要移除的函数。
detachEvent()
语法：element.detachEvent（event,function）
功能：移除attachEvent()方法添加的事件句柄。
参数：
event：必须。字符串，要移除的事件名称。
function：必须。指定要移除的函数。
主要是兼容IE8及以下的浏览器，其实就是把监听事件的两种方法，用if语句合并到一起（也可以说是两种监听事件的方法的函数封装，这种封装方法可以反复使用）：
var EventUtil ={ }代表全局变量，{ }代表可以放函数；addHandler是函数名称；（ ）里面是3个参数，element代表事件对象（也就是html元素），type代表事件类型，handler是事件句柄；IE浏览器点击事件前面要加 "on"。
var EventUtil ={ }代表全局变量，{ }代表可以放函数；addHandler是函数名称；（ ）里面是3个参数，element代表事件对象（也就是html元素），type代表事件类型，handler是事件句柄；IE浏览器点击事件前面要加 "on"。
事件周期
解释器创建一个event对象后，会按如下过程将其在HTML元素间进行传播
第一阶段：事件捕获，事件对象沿DOM树向下传播
第二阶段：目标触发，运行事件监听函数
第三阶段：事件冒泡，事件沿DOM树向上传播
解释器创建一个event对象后，会按如下过程将其在HTML元素间进行传播
第一阶段：事件捕获，事件对象沿DOM树向下传播
第二阶段：目标触发，运行事件监听函数
第三阶段：事件冒泡，事件沿DOM树向上传播
事件冒泡：事件沿DOM树向上传播，直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的元素凡是添加了事件的，都会被触发【addEventListener方法中第三个参数必须是false】。
事件捕获：顺序与事件冒泡相反，使用addEventListener方法绑定事件时，第三个参数必须是true。
大部分事件都是用事件冒泡。
事件委托；给父级元素绑定事件，子元素也会相应绑定事件（原理就是事件冒泡，点击子元素后因为事件冒泡机制所以会往上走，走到父元素后就触发父元素绑定的事件）。
target事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口
target事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口
event对象常用属性和方法实例：
1、event.type 事件类型，比如click，mouseout
2，event.target 事件目标【点击谁谁就是target，事件源】
event.currentTarget 绑定事件的对象【事件绑定在谁身上，就是指向谁】
比如：点击儿子，而事件绑定在父亲上面，target就是儿子，currentTarget是父亲
event.currentTarget 绑定事件的对象【事件绑定在谁身上，就是指向谁】
比如：点击儿子，而事件绑定在父亲上面，target就是儿子，currentTarget是父亲
3.event.preventDefault(); 阻止默认行为，比如阻止链接跳转
4.event.stopPropagation(); 阻止事件捕获或者冒泡 。比如放在子元素里组织冒泡，父元素就不会触发事件；就是它自己触发完事件不会再传播了
5.clientY：就是指浏览器顶部底边到鼠标的位置,但是不包含滚动轴滚动的距离
pageY：就是指浏览器顶部底边到鼠标的位置,但是包含滚动轴滚动的距离【所以如果滚动轴没有动那pageY和clientY一样，如果滚动轴向下滚动了那pageY就会比clientY大】
screenY：屏幕顶部到鼠标位置，跟浏览器所在位置无关，即使把浏览器缩小后往下挪依然是从屏幕顶部开始计算距离
pageY：就是指浏览器顶部底边到鼠标的位置,但是包含滚动轴滚动的距离【所以如果滚动轴没有动那pageY和clientY一样，如果滚动轴向下滚动了那pageY就会比clientY大】
screenY：屏幕顶部到鼠标位置，跟浏览器所在位置无关，即使把浏览器缩小后往下挪依然是从屏幕顶部开始计算距离
IE8及以下浏览器的event对象属性和方法：
event.type：还是事件的类型
event.returnValue=flase：同preventDefault()
阻止默认行为，默认为ture，通过 event.returnValue=flase阻止。
event.cancelBubble=true：同stopPropagation()
阻止事件冒泡，默认为flase，通过event.cancelBubble = true阻止。
srcElement： 同target，指事件源
event.type：还是事件的类型
event.returnValue=flase：同preventDefault()
阻止默认行为，默认为ture，通过 event.returnValue=flase阻止。
event.cancelBubble=true：同stopPropagation()
阻止事件冒泡，默认为flase，通过event.cancelBubble = true阻止。
srcElement： 同target，指事件源
事件类型
UI事件
1.load 当页面完全加载后在window上触发，也可以应用在image标签上，图片加载完毕后弹框，可用于图片预加载，js动态加载，动态加载css
EventUtil.addHandler(window,"load",function(e){
alert("loaded");
})
EventUtil.addHandler(window,"load",function(e){
alert("loaded");
})
//img标签加载完毕
var image = document.getElementById("img");
EventUtil.addHandler(image, "load", function(e) {
alert("图片加载完毕 ");
})
image.src = "1.png";
图片预加载 var image = new Image();//将图片存在了内存中 缓存在内存空间上
EventUtil.addHandler(image,"load",function(event){ alert("Image loaded!"); }); image.src = "smile.gif";
// js动态加载完毕
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("js Loaded");
});
script.src = "jquery.js";
document.body.appendChild(script);
var image = document.getElementById("img");
EventUtil.addHandler(image, "load", function(e) {
alert("图片加载完毕 ");
})
image.src = "1.png";
图片预加载 var image = new Image();//将图片存在了内存中 缓存在内存空间上
EventUtil.addHandler(image,"load",function(event){ alert("Image loaded!"); }); image.src = "smile.gif";
// js动态加载完毕
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("js Loaded");
});
script.src = "jquery.js";
document.body.appendChild(script);
// js动态加载完毕
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("js Loaded");
});
script.src = "jquery.js";
document.body.appendChild(script);
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("js Loaded");
});
script.src = "jquery.js";
document.body.appendChild(script);
// css动态加载完毕
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css Loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css Loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
2.unload事件，用户从一个页面切换到另一个页面
3.resize 窗口大小发生变化时触发，重复执行，损耗性能
EventUtil.addHandler(window, "resize", function(event){
alert("Resized");
});
alert("Resized");
});
4.scroll事件，主要针对新旧浏览器，滚动轮上下滚动触发
5.焦点事件
1、blur 元素失去焦点的时候触发
2. focus 元素获取焦点的时候触发，不支持冒泡
3. focusin 同focus一样 元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+，chrome等
4. focuout 同blur一样，支持事件浏览器是IE5.5+,Safari5.1+，chrome等
1、blur 元素失去焦点的时候触发
2. focus 元素获取焦点的时候触发，不支持冒泡
3. focusin 同focus一样 元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+，chrome等
4. focuout 同blur一样，支持事件浏览器是IE5.5+,Safari5.1+，chrome等
鼠标事件
click
dblclick 双击事件
mousedown 鼠标按下时候触发的事件
mouseup 鼠标松开时候触发的事件
mousedown+mouseup=click事件
click
dblclick 双击事件
mousedown 鼠标按下时候触发的事件
mouseup 鼠标松开时候触发的事件
mousedown+mouseup=click事件
mousemove鼠标在对象上移动，重复触发，注意代码性能优化。
mouseout鼠标离开元素时触发（离开目标对象或子元素都触发，范围比较广）
mouseover鼠标进入元素时触发。（进入目标对象或子元素都触发，范围比较广）
mouseenter鼠标进入目标元素。（只能进入目标元素触发，如其还有子元素不能触发。）
mouseleave鼠标离开目标对象。（只能离开目标元素触发）
mouseout鼠标离开元素时触发（离开目标对象或子元素都触发，范围比较广）
mouseover鼠标进入元素时触发。（进入目标对象或子元素都触发，范围比较广）
mouseenter鼠标进入目标元素。（只能进入目标元素触发，如其还有子元素不能触发。）
mouseleave鼠标离开目标对象。（只能离开目标元素触发）
mousedown鼠标按下时候触发的事件
//高级浏览器：
event.button ==0鼠标左键
event.button==1鼠标中键
event.button==2鼠标右键
//高级浏览器：
event.button ==0鼠标左键
event.button==1鼠标中键
event.button==2鼠标右键
//IE8派系
// event.button == 0 没有按下按钮
//event.button == 1 按下主鼠标按钮
//event.button == 2 按下次鼠标按钮
//event.button == 3 按下同时按下主、次鼠标按钮
//event.button == 4 按下中间鼠标按钮
// event.button == 0 没有按下按钮
//event.button == 1 按下主鼠标按钮
//event.button == 2 按下次鼠标按钮
//event.button == 3 按下同时按下主、次鼠标按钮
//event.button == 4 按下中间鼠标按钮
/*var div = document.getElementById("myDiv"); EventUtil.addHandler(div, "clcik", function(event) {
var keys = new Array();
if(event.shiftKey) {
keys.push("shift");
}
if(event.ctrlKey) {
keys.push("ctrl");
}
if(event.altKey) {
keys.push("alt");
}
if(event.metaKey) {
keys.push("meta");
}
console.log("keys:" + keys.join(","))
; });*/ event.shiftKey表示当我鼠标点下去时同时按下键盘的shift键
var keys = new Array();
if(event.shiftKey) {
keys.push("shift");
}
if(event.ctrlKey) {
keys.push("ctrl");
}
if(event.altKey) {
keys.push("alt");
}
if(event.metaKey) {
keys.push("meta");
}
console.log("keys:" + keys.join(","))
; });*/ event.shiftKey表示当我鼠标点下去时同时按下键盘的shift键
键盘事件
1.keydown 键码，按下任意键触发
EventUtil.addHandler(myText,"keydown",function(event){
console.log(event.keyCode);
})
EventUtil.addHandler(myText,"keydown",function(event){
console.log(event.keyCode);
})
keyCode键码
2.keyup 松开任意键的时候触发，支持keyCode
3.keypress 按下字符键，更适用于使用 charCode（字符码，返回ASCII码），而不是keyCode。
4.textInput
输入什么就会打印什么
EventUtil.addHandler(myText, "textInput", function(event) {
console.log(event.data);
})
输入什么就会打印什么
EventUtil.addHandler(myText, "textInput", function(event) {
console.log(event.data);
})
结构事件
5.DOMNodeRemoved document中任意元素被删除就会触发
EventUtil.addHandler(document, "DOMNodeRemoved", function(event) {
console.log(111111);
})
EventUtil.addHandler(document, "DOMNodeRemoved", function(event) {
console.log(111111);
})
6.DOMNodeInserted document中任意元素被添加就会触发
7. DOMSubtreeModified document结构中发生任何变化都会触发
EventUtil.addHandler(document, "DOMSubtreeModified", function(event) {
console.log(111111);
})
EventUtil.addHandler(document, "DOMSubtreeModified", function(event) {
console.log(111111);
})
8.DOMNodeRemovedFromDocument 从文档中移除之前被触发
9.DOMNodeInsertedIntoDocument 从文档中添加之前被触发
H5新增事件
10.DOMContentLoaded 在DOM树结构之后就会触发，不理会图像。javascript文件、css文件或其他资源是否已经下载，速度比load事件快
11.readstatechange 仅支持IE、firfox、opera，提供文档或者元素加载过程，但是很难预料与load事件一起使用时候，情绪化，限制IE.很难预料
//1、document.readState == uninitialized 尚未初始化
//2、loading 对象正在加载数据
//3、interactive 可以操作对象，单还没有完全加载
//1、document.readState == uninitialized 尚未初始化
//2、loading 对象正在加载数据
//3、interactive 可以操作对象，单还没有完全加载
12.hashchange 只能给window添加，，地址#后面的值变化，
EventUtil.addHandler(window, "hashchange", function(event) {
console.log(event.oldURL + ":"+event.newURL);
})
EventUtil.addHandler(window, "hashchange", function(event) {
console.log(event.oldURL + ":"+event.newURL);
})
移动端事件
1、touchstart：手指触摸屏幕触发
三个属性：
（1）event.touches：当前触摸屏幕的触摸点数组（记录触摸点的信息，有可能多个手指一起触摸）
（2）event.changedTouches：数组中只包含引起事件的触摸点信息（如果四个手指只移动了2个，那只存储这两个移动的触摸点信息）
（3）event.targetTouches：只包含放在元素上的触摸信息（在事件对象上的触摸点的信息）
三个属性：
（1）event.touches：当前触摸屏幕的触摸点数组（记录触摸点的信息，有可能多个手指一起触摸）
（2）event.changedTouches：数组中只包含引起事件的触摸点信息（如果四个手指只移动了2个，那只存储这两个移动的触摸点信息）
（3）event.targetTouches：只包含放在元素上的触摸信息（在事件对象上的触摸点的信息）
2、touchmove：手指在屏幕上滑动触发（重复触发）
3、touchend：手指从屏幕上移开时触发
4、touchcancel：当系统停止跟踪触摸时触发
BOM
BOM(browser object model)浏览器对象模型
BOM的对象有：
window、navigator、screen、history、location、document、event
BOM的对象有：
window、navigator、screen、history、location、document、event
window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象（全局对象）。
全局变量——脚本的任何一个地方都能调用的变量
全局方法——脚本的任何一个地方都能调用的方法
所有的全局变量和全局方法都被归在window上
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象（全局对象）。
全局变量——脚本的任何一个地方都能调用的变量
全局方法——脚本的任何一个地方都能调用的方法
所有的全局变量和全局方法都被归在window上
全局变量可以用以下方式声明：
1、window声明——window.变量名=值
2、关键字声明——var 变量名=值
【两者等价】
--------------------------------------------------
全局函数可以用以下方式声明：
1、window声明——window.函数名=function(){}
2、关键字声明——function 函数名(){}
1、window声明——window.变量名=值
2、关键字声明——var 变量名=值
【两者等价】
--------------------------------------------------
全局函数可以用以下方式声明：
1、window声明——window.函数名=function(){}
2、关键字声明——function 函数名(){}
Window对象的方法
Window对象的方法
语法：window.alert("content")
功能：显示带有一段消息和一个确认按钮的警告框
语法：window.alert("content")
功能：显示带有一段消息和一个确认按钮的警告框
换行：\n
语法：window.confirm("message")
功能：显示一个带有指定消息和ok及取消按钮的对话框
返回值：布尔。如果用户点击确定按钮，则confirm（）返回true
如果用户点击取消按钮，则confirm（）返回false
功能：显示一个带有指定消息和ok及取消按钮的对话框
返回值：布尔。如果用户点击确定按钮，则confirm（）返回true
如果用户点击取消按钮，则confirm（）返回false
换行：\n
语法：window.prompt("text,defaultText")
参数说明：
text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText：默认的输入文本
返回值：如果用户单击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本
参数说明：
text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText：默认的输入文本
返回值：如果用户单击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本
换行：\n
语法：window.open(pageURL, name, parameters)
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL:子窗口路径
name:子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters：窗口参数（各参数用逗号分隔）
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL:子窗口路径
name:子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters：窗口参数（各参数用逗号分隔）
新窗口样式设置：
width：窗口宽度 、height：窗口高度、left：窗口X轴坐标、top：窗口Y轴坐标、toolbar：是否显示浏览器的工具栏、menubar：是否显示菜单栏、scrollbars：是否显示滚动条、location：是否显示地址字段、status：是否添加状态栏
width：窗口宽度 、height：窗口高度、left：窗口X轴坐标、top：窗口Y轴坐标、toolbar：是否显示浏览器的工具栏、menubar：是否显示菜单栏、scrollbars：是否显示滚动条、location：是否显示地址字段、status：是否添加状态栏
语法：window.close();
给你：关闭浏览器窗口（所在的浏览器窗口）
给你：关闭浏览器窗口（所在的浏览器窗口）
超时调用
语法：setTimeout（code，millisec）
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：
1、code：要调用的函数或要执行的JavaScript代码串
2、millisec：在执行代码前需等待的毫秒数
setTimeout方法返回一个ID值通过它取消超时调用
语法：setTimeout（code，millisec）
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：
1、code：要调用的函数或要执行的JavaScript代码串
2、millisec：在执行代码前需等待的毫秒数
setTimeout方法返回一个ID值通过它取消超时调用
setTimeout（）方法用于在指定的毫秒数后调用函数或表达式。
一共有两个点需要注意：
1、 有两个参数
（1） 第一个参数是要执行的函数或者执行脚本
（2） 第二个参数是要多少毫秒后执行，注意单位是毫秒！
2、有三种表达式写法：
（1）第一种是在方法中直接写脚本
（2）第二种是在方法中写匿名函数
（3）第三种是在方法中写定义好的函数的函数名。
一共有两个点需要注意：
1、 有两个参数
（1） 第一个参数是要执行的函数或者执行脚本
（2） 第二个参数是要多少毫秒后执行，注意单位是毫秒！
2、有三种表达式写法：
（1）第一种是在方法中直接写脚本
（2）第二种是在方法中写匿名函数
（3）第三种是在方法中写定义好的函数的函数名。
清除超时调用
语法：clearTimeout(id_of_settimeout)
功能：取消由setTimeout（）方法设置的timeout
参数说明:
1、id_of_settimeout：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块
【清除超时调用后，超时调用的代码就不会再执行了，相当于删除了超时调用代码】
语法：clearTimeout(id_of_settimeout)
功能：取消由setTimeout（）方法设置的timeout
参数说明:
1、id_of_settimeout：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块
【清除超时调用后，超时调用的代码就不会再执行了，相当于删除了超时调用代码】
setInterval 间歇调用
setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：
1.code 要调用的函数或要执行的代码串
2.millisec：周期性执行或调用code之间的时间间隔，以毫秒计
setInterval(）返回ID值
clearInterval（）
setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：
1.code 要调用的函数或要执行的代码串
2.millisec：周期性执行或调用code之间的时间间隔，以毫秒计
setInterval(）返回ID值
clearInterval（）
清除间歇调用
语法：clearInterval（id_of_setinterval）
功能：取消由setInterval（）方法设置的interval
参数说明：
1、id_of_setinterval:由setInterval（）返回的ID值
语法：clearInterval（id_of_setinterval）
功能：取消由setInterval（）方法设置的interval
参数说明：
1、id_of_setinterval:由setInterval（）返回的ID值
获取窗口文档显示区的宽高可以使用window.innerWidth和window.innerHeight
location对象
1、语法：location.href
功能：返回当前加载页面的完整URL
说明：location.href与window.location.href等价
功能：返回当前加载页面的完整URL
说明：location.href与window.location.href等价
与location.replace相比，会生产记录，可以回退
2、语法：location.hash
功能：返回URL中的hash（#号后 跟零或多个字符），如果不包含则返回空字符串。
功能：返回URL中的hash（#号后 跟零或多个字符），如果不包含则返回空字符串。
3、语法：location.host
功能：返回服务器名称和端口号（如果有）【主机地址】
功能：返回服务器名称和端口号（如果有）【主机地址】
4、语法：location.hostname
功能：返回不带端口的服务器名称
功能：返回不带端口的服务器名称
5、语法：location.pathname
功能：返回URL中的目录和（或）文件名
功能：返回URL中的目录和（或）文件名
6、语法：location.port
功能：返回URL中指定的端口号，如果没有，返回空字符串
假设网址为：localhost：8080/hotel
location.port值为8080
功能：返回URL中指定的端口号，如果没有，返回空字符串
假设网址为：localhost：8080/hotel
location.port值为8080
7、语法：location.protocol
功能：返回页面使用的协议
功能：返回页面使用的协议
8、语法：location.search
功能：返回URL的查询字符串。这个字符串以问号开头。
功能：返回URL的查询字符串。这个字符串以问号开头。
location对象方法
1.location.replace()
重新定向URL，不会在历史记录中生成新纪录，即不能回退，没有历史记录。loaction.href='xxx'会有历史记录
重新定向URL，不会在历史记录中生成新纪录，即不能回退，没有历史记录。loaction.href='xxx'会有历史记录
2.location.reload()
重新加载当前显示的页面。
location.reload()有可能从缓存中加载
location.reload(true)从服务器重新加载。
一般放在代码的最后。
重新加载当前显示的页面。
location.reload()有可能从缓存中加载
location.reload(true)从服务器重新加载。
一般放在代码的最后。
history对象：保存了用户在浏览器中访问页面的历史记录
history.back()
回到历史记录的上一步，相当于使用了history.go(-1)
回到历史记录的上一步，相当于使用了history.go(-1)
history.forward()回到历史记录的下一步
相当于使用了history.go(1)
相当于使用了history.go(1)
history.go(n)
回到历史记录的前n步
history.go(-n)回到历史记录的后n步
回到历史记录的前n步
history.go(-n)回到历史记录的后n步
Screen对象：包含有关客户端显示屏幕的信息
screen.availWidth:返回可用屏幕宽度(指除了任务栏之外的内容)
screen.availHeight:返回可用的屏幕高度(指除了任务栏之外的内容)
navigator对象
navigator.userAgent（用来识别浏览器名称，版本，引擎，
以及操作系统 等信息的内容。）
以及操作系统 等信息的内容。）
navigator.appCodeName 获取浏览器名称
navigator.appName 获取完整的浏览器名称
0 条评论
下一页
