js Dom为页面中的元素绑定键盘或鼠标事件

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";
            }

            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>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chenyingying0/p/12266493.html