javascript（七）window其他子对象（DHTML模型）

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;

                   }

         }

}