7.1screen对象
1)包含有关客户端显示屏幕的信息(封装了屏幕相关的信息,供读取)。
2)常用属性:width/height、availWidth/availHeight
例如:var n =screen.width//ok! screen.width= 1000;//error!只能读不能写
7.2history对象
1)包含用户在浏览器窗口中访问过的URL(封装了历史访问记录)。
2)length属性:浏览器历史列表中的URL数量。
3)方法:①history.back():单击后退按钮。
②history.forward():单击向前按钮。
③history.go(n):单击n次后退按钮。
7.3 location对象
1)包含有关当前URL的信息(地址栏),常用于获取和改变当前浏览的网址。
2)href属性:当前窗口正在浏览的网页地址。
3)方法:①location.href="url":在当前页面打开,保留历史访问记录。
②location.replace("url"):在当前页面打开url,不保留历史访问记录。
③location.reload():重新载入当前网址,等同于按刷新。
u 注意事项:
v location.href="url"也等同于location["href"],但很少这么用。
v location="url"好像也可以。
7.4navigator对象
包含浏览器软件的相关信息,常用于获取客户端和操作系统信息。
eg:遍历navigator对象的所有属性
functiontestNavigator(){ var s="";
for(var p in navigator){//p代表对象中的每一个属性
s+=p +":"+navigator[p]+"\n" } alert(s); }
7.5事件
1)事件:指DHTML对象在状态改变、鼠标操作或键盘操作时触发的动作。
2)事件的类别:
①鼠标事件:onclick/ondblclick/onmouseover/onmouseout ……
②键盘事件:onkeydown/onkeyup ……
③状态改变事件:onblur/onfocus/onchange/onload(body里)/onsubmit(form里) ……
3)如何定义事件:
①<标签里 onXXX="代码">:静态,写在html代码中
②obj.onclick = function(){}:动态,在JavaScript代码中定义
4)事件可以被取消:onXXX= "return false;"
例如:ID:<inputid="txtID" type="text" />
<input type="submit"value="Delete" οnclick="return deleteFunc();" />
<spanid="info"></span>
function deleteFunc(){ vardata=document.getElementById("txtID").value;
varspanObj=document.getElementById("info");
if(isNaN(data)){ info.innerHTML="请录入数值";
return false; }
else return confirm("真的要删除吗?"); }
5)事件的处理机制(冒泡机制)
事件冒泡机制:当处于DHTML对象模型底部的对象事件发生时,会依次激活上面对象定义的同类事件处理(即当有层次关系,且定义了相同事件时,会发生)。
例如:现象:单击按钮,则会弹出“1”、“2”、“3”。
单击段落,则会弹出“2”、“3”
单击div,则会弹出“3”
<divstyle="width:100px;height:100px;border:1px solid red;"οnclick="alert('3');">
<pοnclick="alert('2');">p text
<input type="button"value="1" οnclick="alert('1');" />
</p>
<div>
注意事项:使用event对象可以禁止事件冒泡,也可详见jQuery笔记。
7.6 event对象
1)任何事件触发后将会产生一个event对象。
2)event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息(获得event对象后,可以获得相关信息)。
3)常用属性:clientX/clientY/cancelBubble=true(取消冒泡) ……
4)使用event对象
①如何获得event对象
A. IE/Chrome等浏览器:直接使用event关键字。
B. Firefox浏览器:在事件定义中,使用event关键字将事件对象作为参数传入方法。
u 注意事项:在Firefox里直接在JavaScript中使用event,则不行!不认识!即只能在html页面获得event对象!其他浏览器既可以在JavaScript中获得,也可以在html页面中获得。
②如何获得事件源
A. IE/Chrome等浏览器:event.srcElement
B. Firefox浏览器:event.target
u 注意事项:两种获得事件源对象的方式最新的Chrome浏览器都支持。
例如:<divοnclick="func();">div text</div>
//IE/Chrome等浏览器
function func(){ alert(event.clientX+":"+event.clientY);
alert(event.srcElement.nodeName);//DIV(大写的) }
//Firefox浏览器
<divοnclick="func(event);">div text</div>
<!--注意把event传入方法中!这样也可以在JavaScript中写复杂代码了!-->
function func(e){ alert(e.clientX+":"+e.clientY);
alert(e.target.nodeName);//DIV(大写的) }
5)考虑各浏览器的兼容性
<div οnclick="func(event);">divtext</div>
<!--注意把event传入方法中!这样也可以在JavaScript中写复杂代码了!-->
//如下操作可兼容各浏览器
function func(e){ alert(e.clientX+":"+e.clientY);
var obj=e.srcElement ||e.target;
alert(obj.nodeName);//DIV(大写的) }
6)案例
eg:简单计算器(简化版)
<divstyle="border:1px solid red;" οnclick="cal(event);">
<input type="button"value="1" /> <inputtype="button" value="2" />
<input type="button"value="3" /> <inputtype="button" value="4" />
<input type="button"value="+" /> <inputtype="button" value="-" />
<input type="button"value="=" /> <inputtype="text" id="txtNumber" />
</div>
function cal(e){
var obj = e.target || e.srcElement;//获得被单击的对象
//判断只有单击的是button
if(obj.nodeName == "INPUT"&& obj.type =="button"){
if(obj.value =="="){//=按钮进行eval;其他按钮做拼接操作
var s =document.getElementById("txtNumber").value;
var data = eval(s);
document.getElementById("txtNumber").value= data;
}else{
document.getElementById("txtNumber").value+=obj.value;
}
}
}