1. window常用子对象:
history: window对象中保存当前窗体访问过的url的历史记录栈
history.go(1): 前进1次
go(-1): 后退1次
go(0): 刷新当前页
go(n): 前进/后退n次
location:当前窗口正在打开的url地址对象
location.search:获得url中的查询字符串
如果进一步获得参数名和参数值?
先按&分隔,再按=分隔
location.replace("新url"): 在当前窗口打开新链接
不可后退
(history中旧url被新url替换了)
使用location在当前窗口打开新链接,可后退:2种:
location.href="新url";
location.assign("新url");
刷新:location.reload();
screen: 封装当前屏幕的显示信息
screen.height/width: 完成屏幕宽高
availHeight/Width: 去掉任务栏后的剩余宽高
window7下任务栏透明
2. ***事件:
浏览器自动触发的或用户手动触发的对象状态的改变
DOM Level2 Event标准
IE8:自成体系!
事件处理函数:当事件触发时,自动执行的函数
比如:<button οnclick="函数/js语句"></button>
//btn.onclick();
事件处理:
1. 事件定义(绑定事件处理函数):3种
html: <标签 on事件名="fun()">
d1.οnclick=function(){
eval("fun()");
//[window.]fun();
}
强调:fun()中this-->window
如果获得当前目标元素对象:
html: onxxx="fun(this)"
js中定义函数时:fun(elem)
js: elem.on事件名=函数对象;
一个元素的一个事件处理函数,只能绑定一个函数对象
DOM标准:elem.addEventListener(
"事件名",函数对象,是否在捕获阶段触发)
true/false
一个元素的一个事件处理函数,可add多个不同函数对象IE8: elem.attachEvent("on事件名",函数对象)
实际执行的:elem.on事件名(); this-->elem
2. ***事件周期:从浏览器捕获到事件后,一直到最后一个事件触发完,经历的过程。
DOM标准:3个阶段:
1. (由外向内)捕获:从最外层html元素开始,向内逐层记录每层元素绑定的事件处理函数。到目标元素为止
2. 目标触发:自动执行目标元素上绑定的事件处理函数
3. (由内向外)事件冒泡:从目标元素的父元素开始,逐层向上执行每层的事件处理函数,到最外层html结束。
IE8的事件周期:2个阶段:没有捕获
3. event对象:
当事件发生时,自动创建,封装了事件信息
比如:keyCode
screenX/Y
获得event对象:
html: οnclick="fun(event)"
实际调用时: event会自动获得当前事件对象
fun(e){
e中获得的就是事件对象
}
js:elem.onxxxx=fun;
fun(){
//DOM标准:自动创建event对象,默认以第一个参数传入!
//IE8:window全局的event属性,
当事件发生时,也会自动创建event对象,
但会保存在window.event中
}
event对象中包含:
1. 目标元素对象:var src=e.srcElement||e.target
2. ***取消/利用冒泡:
取消:DOM标准:e.stopPropagation()
IE8:e.cancelBubble=true;
一般用在当前事件处理函数执行结尾
***优化:如果多个子元素中定义了相同的事件处理函数
其实,只需要在共同的父元素上定义一次即可!
3. *取消事件:
if(e.preventDefault){
e.preventDefault(); //--DOM
}else{
e.returnValue=false; //--IE8
}
何时取消:比如:表单提交前,如果验证未通过,
则取消之后的自动提交
事件坐标:3种坐标系
1. 相对于显示器:
最大值: screen.availHeight/availWidth
鼠标位置: e.screenX/Y
2. 相对于文档显示区
最大值:window.innerHeight/Width
鼠标位置:e.clientX/x; e.clientY/y
3. 相对于父元素左上角
最大值:父元素的宽和高
鼠标位置:e.offsetX/Y
history: window对象中保存当前窗体访问过的url的历史记录栈
history.go(1): 前进1次
go(-1): 后退1次
go(0): 刷新当前页
go(n): 前进/后退n次
location:当前窗口正在打开的url地址对象
location.search:获得url中的查询字符串
如果进一步获得参数名和参数值?
先按&分隔,再按=分隔
location.replace("新url"): 在当前窗口打开新链接
不可后退
(history中旧url被新url替换了)
使用location在当前窗口打开新链接,可后退:2种:
location.href="新url";
location.assign("新url");
刷新:location.reload();
screen: 封装当前屏幕的显示信息
screen.height/width: 完成屏幕宽高
availHeight/Width: 去掉任务栏后的剩余宽高
window7下任务栏透明
2. ***事件:
浏览器自动触发的或用户手动触发的对象状态的改变
DOM Level2 Event标准
IE8:自成体系!
事件处理函数:当事件触发时,自动执行的函数
比如:<button οnclick="函数/js语句"></button>
//btn.onclick();
事件处理:
1. 事件定义(绑定事件处理函数):3种
html: <标签 on事件名="fun()">
d1.οnclick=function(){
eval("fun()");
//[window.]fun();
}
强调:fun()中this-->window
如果获得当前目标元素对象:
html: onxxx="fun(this)"
js中定义函数时:fun(elem)
js: elem.on事件名=函数对象;
一个元素的一个事件处理函数,只能绑定一个函数对象
DOM标准:elem.addEventListener(
"事件名",函数对象,是否在捕获阶段触发)
true/false
一个元素的一个事件处理函数,可add多个不同函数对象IE8: elem.attachEvent("on事件名",函数对象)
实际执行的:elem.on事件名(); this-->elem
2. ***事件周期:从浏览器捕获到事件后,一直到最后一个事件触发完,经历的过程。
DOM标准:3个阶段:
1. (由外向内)捕获:从最外层html元素开始,向内逐层记录每层元素绑定的事件处理函数。到目标元素为止
2. 目标触发:自动执行目标元素上绑定的事件处理函数
3. (由内向外)事件冒泡:从目标元素的父元素开始,逐层向上执行每层的事件处理函数,到最外层html结束。
IE8的事件周期:2个阶段:没有捕获
3. event对象:
当事件发生时,自动创建,封装了事件信息
比如:keyCode
screenX/Y
获得event对象:
html: οnclick="fun(event)"
实际调用时: event会自动获得当前事件对象
fun(e){
e中获得的就是事件对象
}
js:elem.onxxxx=fun;
fun(){
//DOM标准:自动创建event对象,默认以第一个参数传入!
//IE8:window全局的event属性,
当事件发生时,也会自动创建event对象,
但会保存在window.event中
}
event对象中包含:
1. 目标元素对象:var src=e.srcElement||e.target
2. ***取消/利用冒泡:
取消:DOM标准:e.stopPropagation()
IE8:e.cancelBubble=true;
一般用在当前事件处理函数执行结尾
***优化:如果多个子元素中定义了相同的事件处理函数
其实,只需要在共同的父元素上定义一次即可!
3. *取消事件:
if(e.preventDefault){
e.preventDefault(); //--DOM
}else{
e.returnValue=false; //--IE8
}
何时取消:比如:表单提交前,如果验证未通过,
则取消之后的自动提交
事件坐标:3种坐标系
1. 相对于显示器:
最大值: screen.availHeight/availWidth
鼠标位置: e.screenX/Y
2. 相对于文档显示区
最大值:window.innerHeight/Width
鼠标位置:e.clientX/x; e.clientY/y
3. 相对于父元素左上角
最大值:父元素的宽和高
鼠标位置:e.offsetX/Y