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

-Advertisement-

html滑鼠事件 onload 頁面載入 onclick 滑鼠單擊 onmouseover 滑鼠移入 onmouseout 滑鼠移出 onfocus 獲取焦點 onblur 失去焦點 onchange 域的內容改變在事件觸發中，this表示對當前dom對象的引用 1、html事件，在html元素上 ...

html滑鼠事件

onload 頁面載入

onclick 滑鼠單擊

onmouseover 滑鼠移入

onmouseout 滑鼠移出

onfocus 獲取焦點

onblur 失去焦點

onchange 域的內容改變

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

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

<!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"

您的分享是我們最大的動力!

-Advertisement-