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>