亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

DOM基礎教程之事件類型

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

對于用戶事件類型而言，最常用的是鼠標、鍵盤、瀏覽器。

1.鼠標事件：

鼠標的事件都頻繁使用，下面例子就測試各種鼠標事件

復制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var disp = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得對象
                disp.innerHTML += "鼠標事件名稱：" + 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>

鼠標的鍵值button測試（附對照表）

復制代碼 代碼如下:

<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; //測試未按下任何鍵
        </script>
        <div>
            <p id="display"></p>
        </div>

2.鍵盤事件

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

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

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

keyup（釋放某個鍵時觸發(fā)）

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

復制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                if (window.event) oEvent = window.event; //處理兼容性，獲得事件對象
                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>

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

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

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

之所以不采用keyCode是因為它表示鍵盤按鍵，而不是輸出的字符，因此，輸出“a”和“A”，keycode是等值的，charcode則以字符區(qū)分。

另外在keypress中，標準dom的keycode值始終為0；

例子：鍵盤事件的相關屬性：

復制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var oDiv = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得事件對象
                //設置ie charcode的值
                oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
                oDiv.innerHTML += oEvent.type + "：charCode" + oEvent.charCode + "keyCode" + oEvent.keyCode + "<br>"; //輸出測試
            }
            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>

3.htm事件

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

load事件是常用的事件之一，因為在頁面載入完成之前，dom的框架還沒有搭建完成，因此任何相關操作都不能發(fā)生。

給window對象分配load，unload事件等同于<body>標記的onload和onunload方法。

相關文章

最新評論