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>

它只能針對鍵盤按下的非數字字符，可是輸入的是漢字，它卻檢測不出來。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。