js对象

(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>

它只能针对键盘按下的非数字字符,但是输入的是汉字,它却检测不出来。

原文地址:https://www.cnblogs.com/liaoxiaolao/p/9797362.html