首頁 > web前端 > 前端問答 > javascript中常用的事件有哪些

javascript中常用的事件有哪些

青灯夜游
發布: 2022-02-21 17:37:05
原創
13076 人瀏覽過

javascript常用的事件有:1、點擊事件(onclick和ondblclick);2、焦點事件(onblur和onfocus);3、載入事件(onload);4、滑鼠事件;5、鍵盤事件;6、選擇和改變事件;7、表單事件。

javascript中常用的事件有哪些

本教學操作環境: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學習教學

#】

以上是javascript中常用的事件有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板