js Dom爲頁面中的元素綁定鍵盤或鼠標事件

時間 2020-02-06

標籤 dom 頁面元素綁定鍵盤鼠標事件欄目 JavaScript 简体版

原文原文鏈接

html鼠標事件html

onload 頁面加載瀏覽器

onclick 鼠標單擊dom

onmouseover 鼠標移入函數

onmouseout 鼠標移出this

onfocus 獲取焦點spa

onblur 失去焦點3d

onchange 域的內容改變code

在事件觸發中，this表示對當前dom對象的引用orm

一、html事件，在html元素上直接綁定事件htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:30px;
            background:#abcdef;
            line-height:30px;
            text-align: center;
            font-size:14px;
            border-radius:5px;
            cursor:pointer;
        }
        div{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
    </style>
</head>
<body>
    <button id="btn" class="btn" onclick="alert('我被點擊啦！');">我是按鈕</button>
    <div onmouseover="myFun(this,'orange')" onmouseout="myFun(this,'pink')">我是div</div>
    <script>
        function myFun(obj,bgcolor){
            obj.style.backgroundColor=bgcolor;
        }

    </script>
</body>
</html>

DOM 0級

經過dom獲取元素，並綁定事件

若是事件綁定跟的是函數名，千萬不要加括號，不然不須要點擊，頁面一刷新即會觸發函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
        .btn-active{
            width:140px;
            height:140px;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
            background:pink;
        }
    </style>
</head>
<body>
    <div id="btn" class="btn">解鎖</div>
    <script>
        var btn=document.getElementById("btn");
        btn.onclick=myFun;//此處函數後面必定不能加括號，不然不須要點擊會直接調用
        function myFun(){
            if(this.className=="btn"){
                this.className="btn-active";
                this.innerHTML="鎖定";
            }else{
                this.className="btn";
                this.innerHTML="解鎖";
            }
        }

    </script>
</body>
</html>

當把獲取dom元素的腳本，放置在元素的前面，會報錯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
        .btn-active{
            width:140px;
            height:140px;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
            background:pink;
        }
    </style>
        <script>
        var btn=document.getElementById("btn");
        btn.onclick=myFun;//此處函數後面必定不能加括號，不然不須要點擊會直接調用
        function myFun(){
            if(this.className=="btn"){
                this.className="btn-active";
                this.innerHTML="鎖定";
            }else{
                this.className="btn";
                this.innerHTML="解鎖";
            }
        }

    </script>
</head>
<body>
    <div id="btn" class="btn">解鎖</div>

</body>
</html>

把腳本寫在window.onload事件中，確保元素已經生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
        .btn-active{
            width:140px;
            height:140px;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
            background:pink;
        }
    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            btn.onclick=myFun;//此處函數後面必定不能加括號，不然不須要點擊會直接調用
            function myFun(){
                if(this.className=="btn"){
                    this.className="btn-active";
                    this.innerHTML="鎖定";
                }else{
                    this.className="btn";
                    this.innerHTML="解鎖";
                }
            }
        }
    </script>
</head>
<body>
    <div id="btn" class="btn">解鎖</div>

</body>
</html>

onfocus事件和onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #tip{display: none;}
    </style>
    <script>
        window.onload=function(){
            var password=document.getElementById("password");
            var tip=document.getElementById("tip");
            password.onfocus=function(){
                tip.style.display="inline-block";
            }
            password.onblur=function(){
                var val=this.value;
                // 密碼是6位數字
                if(val.length==6 && !isNaN(val)){
                    tip.innerHTML="ok";
                }else{
                    tip.innerHTML="error";
                }
            }
        }
    </script>
</head>
<body>
    <input type="password" id="password" name="password">
    <span id="tip">請輸入密碼</span>
</body>
</html>

獲取body元素 document.body

當select中的option被選擇時，select的value值就會等於被選中的option的value值

所以能夠用this.value獲得被選擇的option的value值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var menu=document.getElementById("menu");
            menu.onchange=function(){
                var color=this.value;
                if(color==""){ 
                    document.body.style.backgroundColor="#fff";
                }else{ 
                    document.body.style.backgroundColor=color;
                }
            }
        }
    </script>
</head>
<body>
    <p>請選擇你喜歡的顏色呀</p>
    <select name="menu" id="menu">
        <option value="">請選擇</option>
        <option value="orange">元氣橙</option>
        <option value="pink">仙女粉</option>
        <option value="#abcdef">森系藍</option>
    </select>
</body>
</html>

鼠標事件

onmousedown 鼠標按下

onmousemove 鼠標在元素內移動

onmouseup 鼠標鬆開

onresize 瀏覽器窗口大小調整

onscroll 拖動滾動條

onsubmit 表單提交加在form表單上，而不是加在提交按鈕上

onmousedown+onmouseup=onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        div{
            width:200px;
            height:200px;
            background:#abcdef;
            overflow: auto;
        }
        #myform{
            margin-top:50px;
        }
    </style>
    <script>
        window.onload=function(){
            var div=document.getElementById("div");
            div.onmousedown=function(){
                this.innerHTML="onmousedown";
            }
            div.onmousemove=function(){
                this.innerHTML="onmousemove";
            }
            div.onmouseup=function(){
                this.innerHTML="onmouseup";
            }
            window.onresize=function(){
                console.log("resized");
            }
            div.onscroll=function(){
                this.style.color="orange";
            }

            var myform=document.getElementById("myform");
            myform.onsubmit=function(){
                alert("表單提交啦~");
            }
        }
    </script>
</head>
<body>
    <div id="div">
        文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>
    </div>
    <form id="myform">
        <input type="submit">
    </form>
</body>
</html>

鍵盤事件

onkeydown 鍵盤被按下

onkeypress 鍵盤被按下（只有字母+數字+符號）

onkeyup 鍵盤被釋放

keyCode 鍵碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var count=document.getElementById("count");
            var text=document.getElementById("text");

            text.onkeyup=function(e){
                console.log(e.keyCode);
                var len=text.value.length;
                count.innerHTML=30-len;
            }
        }
    </script>
</head>
<body>
    <p>還能夠輸入<span id="count">30</span>/30</p>
    <textarea name="text" id="text" cols="60" rows="3"></textarea>
</body>
</html>