欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DOM基礎(chǔ)教程之事件類型

 更新時(shí)間：2015年01月20日 15:33:27   投稿：hebedich  
這篇文章主要介紹了DOM基礎(chǔ)教程之事件類型的相關(guān)資料,需要的朋友可以參考下

對(duì)于用戶事件類型而言，最常用的是鼠標(biāo)、鍵盤、瀏覽器。

1.鼠標(biāo)事件：

鼠標(biāo)的事件都頻繁使用，下面例子就測(cè)試各種鼠標(biāo)事件

復(fù)制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var disp = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得對(duì)象
                disp.innerHTML += "鼠標(biāo)事件名稱：" + oEvent.type + "<br>";
            }
            window.onload = function() {
                var oP = document.getElementById("box");
                oP.onmousedown = handle;
                oP.onmouseover = handle;
                oP.onmouseup = handle;
                oP.onmouseout = handle;
                oP.onclick = handle;
                oP.ondblclick = handle;
            }
        </script>
        <div>
            <div id="box" style="width:100px;height:100px;background:#ddd;">
                box內(nèi)容
            </div>
            <p id="display"></p>
        </div>

鼠標(biāo)的鍵值button測(cè)試（附對(duì)照表）

復(fù)制代碼 代碼如下:

<script language="javascript">
            function TestClick(oEvent) {
                var oDiv = document.getElementById("display");
                if (window.event)
                    oEvent = window.event;
                oDiv.innerHTML += oEvent.button; //輸出button的值
            }
            document.onmousedown = TestClick;
            window.onload = TestClick; //測(cè)試未按下任何鍵
        </script>
        <div>
            <p id="display"></p>
        </div>

2.鍵盤事件

鍵盤事件種類不多，僅三種事件。

keydown（按下某鍵，一直按住會(huì)持續(xù)觸發(fā)）

keypress（按下某鍵并產(chǎn)生字符時(shí)觸發(fā)，即忽略Shift、Alt，ctrl等功能鍵）

keyup（釋放某個(gè)鍵時(shí)觸發(fā)）

鍵盤監(jiān)聽(tīng)示例：

復(fù)制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                if (window.event) oEvent = window.event; //處理兼容性，獲得事件對(duì)象
                var oDiv = document.getElementById("display");
                oDiv.innerHTML += oEvent.type + "&nbsp;"; //輸出事件名稱
            }
            window.onload = function() {
                var oTextArea = document.getElementById("textin");
                oTextArea.onkeydown = handle; //監(jiān)聽(tīng)所有鍵盤事件
                oTextArea.onkeyup = handle;
                oTextArea.onkeypress = handle;
            }
        </script>
        <div>
            <textarea rows="4" cols="50" id="textin">
            </textarea>
            <p id="display"></p>
        </div>

對(duì)于鍵盤而言，最重要的不是事件的名稱，而是所按的是什么鍵。由于ie沒(méi)有charCode屬性，而keyCode只有在keydown、keyup事件發(fā)生的時(shí)才與標(biāo)準(zhǔn)dom的keycode相同，

在keypress事件中等同于keycode，因此采用以下方法。

復(fù)制代碼 代碼如下:
oEvent.charCode = (oEvent.type == "keypress")?oEvent.keycode:();

之所以不采用keyCode是因?yàn)樗硎炬I盤按鍵，而不是輸出的字符，因此，輸出“a”和“A”，keycode是等值的，charcode則以字符區(qū)分。

另外在keypress中，標(biāo)準(zhǔn)dom的keycode值始終為0；

例子：鍵盤事件的相關(guān)屬性：

復(fù)制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var oDiv = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得事件對(duì)象
                //設(shè)置ie charcode的值
                oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
                oDiv.innerHTML += oEvent.type + "：charCode" + oEvent.charCode + "keyCode" + oEvent.keyCode + "<br>"; //輸出測(cè)試
            }
            window.onload = function() {
                var oTextArea = document.getElementById("textin");
                oTextArea.onkeydown = handle; //監(jiān)聽(tīng)所有鍵盤事件
                oTextArea.onkeypress = handle;
            }
        </script>
        <div>
            <textarea rows="4" cols="50" id="textin">
            </textarea>
            <p id="display"></p>
        </div>

3.htm事件

對(duì)于瀏覽器而言，各種html有著自己的事件，有一些也是用戶常常接觸到的，比如load，error，select等，常用的html事件如下：

load事件是常用的事件之一，因?yàn)樵陧?yè)面載入完成之前，dom的框架還沒(méi)有搭建完成，因此任何相關(guān)操作都不能發(fā)生。

給window對(duì)象分配load，unload事件等同于<body>標(biāo)記的onload和onunload方法。

相關(guān)文章

最新評(píng)論