javascript中常用的事件有哪些

javascript中的常用事件有：1、點選事件（onclick和ondblclick）；2、焦點事件（onblur和onfocus）；3、載入事件（onload）；4、滑鼠事件；5、鍵盤事件；6、選擇和改變事件；7、表單事件。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JS中的事件：

概念：某些元件被執行了某些操作後，觸發某些程式碼的執行。
事件：某些操作。如：單擊，雙擊，鍵盤按下了，滑鼠移動了
事件源：元件。如：按鈕文字輸入框…
監聽器：程式碼。
註冊監聽：將事件，事件源，監聽器結合在一起。當事件源上發生了某個事件，則觸發執行某個監聽器程式碼。

1、常用事件

1）點選事件：

onclick：單擊事件
ondblclick：雙擊事件

2）焦點事件

onblur：失去焦點
onfocus:元素獲得焦點。

3）載入事件：

onload：一張頁面或一幅影象完成載入。

4）滑鼠事件：

onmousedown 滑鼠按鈕被按下。
onmouseup 滑鼠按鍵被鬆開。
onmousemove 滑鼠被移動。
onmouseover 滑鼠移到某元素之上。
onmouseout 滑鼠從某元素移開。

5）鍵盤事件：

onkeydown 某個鍵盤按鍵被按下。
onkeyup 某個鍵盤按鍵被鬆開。
onkeypress 某個鍵盤按鍵被按下並鬆開。

6）選擇和改變事件

onchange 域的內容被改變。
onselect 文字被選中。

7）表單事件：

onsubmit 確認按鈕被點選。
onreset 重置按鈕被點選。

2、事件的註冊

3.1、什麼是事件的註冊（繫結）？

其實就是告訴瀏覽器，當事件響應後要執行哪些操作程式碼，叫事件註冊或事件繫結。

3.2、註冊事件的兩種方式（靜態註冊事件、動態註冊事件）

靜態註冊事件：通過 html 標籤的事件屬性直接賦於事件響應後的程式碼，這種方式我們叫靜態註冊。

function sayHello() {
    alert("hello js!");
}
<!--註冊事件的第一種方式，直接在標籤中使用事件控制程式碼-->
<!--以下程式碼的含義是：將sayHello函數註冊到鈕上，等待click事件發生之後，
該函數被瀏覽器呼叫。我們稱這個函數為回撥函數。-->
<input type="button" value="hello" onclick="sayHello()"/>

動態註冊事件： 是指先通過 js 程式碼得到標籤的 dom 物件，然後再通過 dom 物件.事件名 =function(){}這種形式賦於事件響應後的程式碼，叫動態註冊。

動態註冊基本步驟：

1、獲取標籤物件

2、標籤物件.事件名 =fucntion(){}

<!--第二種註冊事件的方式，是使用純JS程式碼完成事件的註冊。-->
<input type="button" value="hello1" id="mybtn1"/>
<input type="button" value="hello2" id="mybtn2"/>
<input type="button" value="hello3" id="mybtn3"/>

<script type="text/javascript">
    function dynamic(){
        alert("動態註冊事件1");
    }
    // 第一步:先獲取這個鈕物件()
    /*
        document:是 JavaScript語 言 提 供 的 一 個 對 象 （ 文 檔 ), document是 JavaScript語 言 提 供 的 一 個 對 象 （ 文 檔 ),
        get: 獲 取
        Element:元 素 （ 就 是 標 籤 
        By:通 過 。 。 由 。 。 經 。 。 。
        Id: id 屬 性
        getElementById: 通 過 id 屬 性 獲 取 標 籤 對
    */
    var btnobj1 = document.getElementById("mybtn1");
    // 第二步:給鈕物件的onclick屬性賦值
    btnobj1.onclick = dynamic;// 注意:千萬別加小括號. btnObj.onclick = doSome();這是錯誤的寫法.
                                // 這行程式碼的含義是,將回撥函數doSome註冊到click事件上.

    var btnobj2 = document.getElementById("mybtn2");
    btnobj2.onclick = function(){// 這個函數沒名字,叫做匿名函數,這個匿名函數也是一個回撥函數.
        alert("動態註冊事件2");// 這個函數在頁面開啟的時候只是註冊上,不會被呼叫,在click事件發生之後才會呼叫.
    }

    document.getElementById("mybtn3").onclick = function () {
        alert("動態註冊事件3");
    }
</script>

通過keydown事件演示確認鍵13，ESC鍵27

<body>
<script type="text/javascript">
    // 確認鍵的鍵值是13
    // ESC鍵的鍵值是27
    window.onload = function () {
      /*  var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            // 獲取鍵值物件
            alert(event);// 什麼鍵顯示都為[object KeyboardEvent]
            // 對於「鍵盤事件物件"來說,都keyCode屬性用來獲取鍵值.
            alert(event.keyCode);//確認鍵顯示13
        }
*/
        var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            if(event.keyCode == 13){
                alert("正在進行驗證")
            }
        }
    }
</script>

<input type="text" id="key"/>

</body>

【相關推薦：】

以上就是javascript中常用的事件有哪些的詳細內容，更多請關注TW511.COM其它相關文章！