(1)history对象
作用:该对象包含客户端访问过的URL信息
a.html
<a href="b.html">goto b</a>
b.html
<script language="javascript" type="text/javascript"> function goback(){ history.back();
//history.go(-1); } </script> <a href="a.html" onclick="goback()">返回上级页面</a>
history对象的属性--length:返回浏览器历史列表中的URL数量。
hirstory的back()和go(-1)效果是一样的。
(2)location对象
location对象:即对象包含客户端当前的URL信息。该对象表示浏览器的location.
window是打开就有,而location打开时可能没有。
location对象的方法--reload()方法:重新加载当前文档。
href:html代码的地址。
<script language="javascript"> function test(){ location.reload(); } </script> <body> <input type="button" value="刷新页面" onclick="test()"/> <span>闪动</span> </body>
(3)navigator对象:即该对象包含当前浏览器的各信息(比如说浏览器版本啊)。
<html>
<head>
<script language="javascript">
document.writeln("name:"+navigator.appName+"");
document.writeln("<br/>"+navigator.platform+"<br/>"+navigator.systemLanguage);
</script>
</head>
<body>
</body>
</html>
(4)screen对象
screen对象:
案例:当用户屏幕的分辨率不是1024*768时,请提示用户。
screen对象的width和height,指的是用户计算机屏幕的分辨率,而不是浏览器的尺寸。
screen.availHeight返回的是屏幕去掉任务栏后的高度。
<html> <body> <script language="javascirpt" type="text/javascript"> // type="text/javascript"这句话是必须写的。 document.writeln(screen.width+" "+screen.height); document.writeln("<br/>"+screen.availHeight); </script> </body> </html>
(5)event对象。
event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用。
dom对象详解--事件驱动
****关于绑定事件的细节*******
(1)直接和某个html空间绑定 比如
<input type="button" value="刷新页面" onclick="test()"/>
(2)通过getElementById()来绑定。
<script language="javascript" type="text/javascript"> function test(){ document.writeln("hello"); } </script> <body> <input type="button" id="but1" value="刷新页面"/> <script type="text/javascript"> document.getElementById("but1").onclick=test; //在but1有了之后才能获取,所以这条语句应该在button创建之后才能写。 </script> </body>
(3)通过addEventLister()或者attachEvent来绑定
比如投票:投票完成后,解除绑定。
<script language="javascript" type="text/javascript"> function test(){ //document.writeln("hello"); window.alert("你投了一票"); document.getElementById("but1").detachEvent("onclick",test); } </script> <body> <input type="button" id="but1" value="投票"/> <script type="text/javascript"> document.getElementById("but1").attachEvent("onclick",test); //在but1有了之后才能获取,所以这条语句应该在button创建之后才能写。 </script> </body>
这代码在谷歌浏览器和IE浏览器中都无法运行(还报错)。
查阅资料后,应该这么写
<script language="javascript" type="text/javascript"> function test(){ //document.writeln("hello"); window.alert("你投了一票"); document.getElementById("but1").removeEventListener("onclick",test); } </script> <body> <input type="button" id="but1" value="投票"/> <script type="text/javascript" language="javascript"> document.getElementById("but1").addEventListener("onclick",test); //在but1有了之后才能获取,所以这条语句应该在button创建之后才能写。 </script> </body>
可以还是没有反应,但是没有报错了。
而可运行代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #myDIV { background-color: coral; border: 1px solid; padding: 50px; color: white; } </style> </head> <body> <div id="myDIV"> div 元素添加了 onmousemove 事件句柄,在你移动鼠标时会显示随机数。 <p>点击按钮移除 DIV 的事件句柄。</p> <button onclick="removeHandler()" id="myBtn">点我</button> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script> </body> </html>
event的keyCode属性:返回被按下键的unicode字符码。
案例,请输入一个六位数,要求输入的是数字并且是6位。
window.event.returnValue用来不记录刚才输入的非法数据。
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var int=""; function test(event){ //用户每按下一个键,就去判断是不是一个数 if(event.keyCode>=48&&event.keyCode<=57){ int+=(event.keyCode-48); }else{ window.alert("您输入的不是数"); window.event.returnValue=false; } if(int.length>6){ window.alert("数字已经到达6位了!"); window.event.returnValue=false; } } </script> </head> <body> <input type="text" onkeypress="test(event)" id="text1"/> <!-- 在按的时候就响应它onkeypress --> <input type="button" onclick="test()" value="提交" /> </body> </html>
它只能针对键盘按下的非数字字符,但是输入的是汉字,它却检测不出来。