技術標籤：前端學習dom按鍵事件點選事件前端

二十一、DOM 繫結事件

• 對滑鼠操作
• 對鍵盤操作
• 其他

對滑鼠操作

• onclick事件：滑鼠左鍵點選完成時觸發
• oncontextmenu事件：滑鼠右鍵點選時觸發
  • event.preventDefault()：用來阻止預設行為，如阻止右鍵點選瀏覽器出現瀏覽器預設的選單

    <div id="div1">
        測試滑鼠點選事件
    </div>
    <script>
        var
 
 oDiv = document.getElementById("div1");

        oDiv.onclick = function () {
            oDiv.innerText = "滑鼠左鍵點選";
            //oDiv.style.backgroundColor = "lightblue";
        }
        oDiv.oncontextmenu = function(){
            oDiv.innerText = "滑鼠右鍵點選"
 
;
            event.preventDefault();//阻止預設行為
        }

    </script>

當分別用左鍵和右鍵完成點選結束後：

• onmouseover事件：滑鼠移入時觸發
• onmouseout 事件：滑鼠移出時觸發
  • 與 onmouseover事件 是相對應的

        oDiv.onmouseover = function () {
            oDiv.innerText = "滑鼠移入";
            oDiv.style.backgroundColor = "lightblue"
 
;
        }
        oDiv.onmouseout = function () {
            oDiv.innerText = "滑鼠移出";
            oDiv.style.backgroundColor = "lightpink";
        }

當滑鼠移入或移出時：

• onmousedown事件：滑鼠按下時觸發
• onmouseup事件：滑鼠抬起時觸發
  • 與 onmousedown事件 是相對應的

        oDiv.onmousedown = function () {
            oDiv.innerText = "滑鼠按下";
            oDiv.style.backgroundColor = "lightblue";
        }
        oDiv.onmouseup = function () {
            oDiv.innerText = "滑鼠抬起";
            oDiv.style.backgroundColor = "lightpink";
        }

• onmousemove事件：滑鼠移動時觸發

        var i = 0;
        oDiv.onmousemove = function () {
            oDiv.innerText = "滑鼠移動" + i + "次";
            oDiv.style.backgroundColor = "lightblue";
            i++;
        }

當滑鼠不斷移動時：

對鍵盤操作

• onkeydown：某個鍵盤按鍵被按下時觸發
  • event.keyCode可以返回鍵盤碼
• onkeyup：某個鍵盤按鍵被鬆開時觸發
  • 與 onkeydown 相對應
• onkeypress：某個鍵盤按鍵被按下並鬆開時觸發
  • 無法識別功能鍵（如F1)

    <input type="text">
    <script>
        var oInp = document.getElementsByTagName("input")[0];
        var oDiv = document.getElementById("oDiv");

        oInp.onkeydown = function(e){
            console.log(e.keyCode);
            oInp.style.backgroundColor = "lightblue";
            console.log("onkeydown");
        }
        oInp.onkeyup = function(){
            oInp.style.backgroundColor = "lightpink";
            console.log("onkeyup");
        }
        oInp.onkeypress = function(){
            oInp.style.backgroundColor = "lightsalmon";
            console.log("onkeypress");
        }
    </script>

當按下普通鍵時：

當按下功能鍵F2時：

其他

• onfocus：當元素獲得焦點時觸發
• onblur：當元素失去焦點時觸發
  • 與 onfocus 相對應
• onload：當一張頁面或一幅影象完成載入時觸發
• onselect：當文字被選中時觸發
• onsubmit：當提交按鈕被點選時觸發
  • 該事件僅在<form>表單標籤中被支援，因為提交按鈕出現在表單元素中

以上為本萌新個人總結，如有不當之處望指正，有問題可以聯絡
郵箱：[email protected]或
QQ：2635591841

更於2021.2.17