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)事件

<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)聽示例：

復(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)聽所有鍵盤事件

                oTextArea.onkeyup = handle;

                oTextArea.onkeypress = handle;

            }

        </script>

        <div>

            <textarea rows="4" cols="50" id="textin">

            </textarea>

            <p id="display"></p>

        </div>

對(duì)于鍵盤而言，最重要的不是事件的名稱，而是所按的是什么鍵。由于ie沒有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)聽所有鍵盤事件

                oTextArea.onkeypress = handle;

            }

        </script>

        <div>

            <textarea rows="4" cols="50" id="textin">

            </textarea>

            <p id="display"></p>

        </div>