js对象

时间 2019-11-13

原文原文链接

（1）history对象javascript

做用：该对象包含客户端访问过的URL信息html

a.htmljava

<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数量。app

hirstory的back()和go(-1)效果是同样的。dom

（2）location对象函数

location对象：即对象包含客户端当前的URL信息。该对象表示浏览器的location.spa

window是打开就有，而location打开时可能没有。code

location对象的方法--reload()方法：从新加载当前文档。orm

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空间绑定好比

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

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