Java Script Dom事件

阿新 • • 發佈：2021-01-14

技術標籤：js

滑鼠事件

1.onclick

語法：

object.οnclick=function(){SomeJavaScriptCode};

定義和用法

onclick 事件會在元素被左鍵點選時發生。

例項：

// 滑鼠左鍵單擊事件
            box.onclick = function() {
                    box.style.backgroundColor = "red";

                }

支援 onclick 事件的 HTML 標籤：

onclick 屬性可以使用與所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

2.ondblclick

語法：

object.ondblclick=function(){SomeJavaScriptCode};

定義和用法

ondblclick事件會在元素左鍵被雙擊時發生。

例項：

// 滑鼠左鍵雙擊事件
            box.ondblclick = function() {
                    box.style.backgroundColor = "chocolate";
                }

3.oncontextmenu

語法：object.oncontextmenu=function(){SomeJavaScriptCode

}

定義和用法

oncontextmenu事件會在元素右鍵鍵被點選時發生。

例項：

    // 滑鼠右鍵單擊事件
            box.oncontextmenu = function() {
                    box.style.color = "#fff";
                }

屬性	描述
onclick	在使用者點選滑鼠左鍵開啟上下文選單時觸發
oncontextmenu	在使用者點選滑鼠右鍵開啟上下文選單時觸發
ondblclick	在使用者點選滑鼠左鍵開啟上下文選單時觸發
onmousedown	滑鼠按鈕被按下。
onmouseenter	當滑鼠指標移動到元素上時觸發。
onmouseleave	當滑鼠指標移出元素時觸發
onmousemove	滑鼠被移動。
onmouseover	滑鼠移到某元素之上。
onmouseout	滑鼠從某元素移開。
onmouseup	滑鼠按鍵被鬆開。

鍵盤事件

屬性	描述	DOM
onkeydown	某個鍵盤按鍵被按下。	2
onkeypress	某個鍵盤按鍵被按下並鬆開。	2
onkeyup	某個鍵盤按鍵被鬆開。	2

表單事件

 <script>
        window.onload = function(){
            var inp = document.querySelector("input");
            var form = document.querySelector("form");
            inp.onchange = function(){
                console.log("表單內容發生了變化");
            }
            inp.oninput = function(){
                console.log("你輸入了內容");
            }
            inp.onfocus = function(){
                console.log("獲取了焦點");
                this.style.backgroundColor = "red";
            }
            inp.onblur = function(){
                console.log("失去了焦點");
                // this.style.backgroundColor = "red";
            }
            form.onsubmit = function(){
                alert("表單提交了");
            }
            form.onreset = function(){
                // alert("表單重置");
                console.log("表單重置");
            }


        }
    </script>
</head>
<body>
    <form action="">
        <input type="text" value="">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>

屬性	描述
onblur	元素失去焦點時觸發
onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)
onfocus	元素獲取焦點時觸發
onfocusin	元素即將獲取焦點時觸發
onfocusout	元素即將失去焦點時觸發
oninput	元素獲取使用者輸入時觸發
onreset	表單重置時觸發
onsearch	使用者向搜尋域輸入文字時觸發 (<input="search">)
onselect	使用者選取文字時觸發 ( <input> 和 <textarea>)
onsubmit	表單提交時觸發