DOM事件-优快云博客

本文详细介绍了HTML中的各种事件及其使用方法，包括如何通过HTML属性直接绑定事件、如何利用DOM方式绑定事件，以及常见的鼠标事件、页面加载事件等。

HTML事件

语法：<tag 事件="执行脚本"></tag>

功能：在HTML元素上绑定事件。

说明：执行脚本可以是一个函数的调用。

<head>
<style>
  .btn{ width: 140px;height: 30px;line-height: 30px;background: #00f;color: #fff;font-size: 14px;text-align: center;border-radius: 5px;cursor: pointer;margin-top: 30px;}
</style>
</head>
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')">
<!-- 鼠标划过按钮调用 mouseoverFn 的函数-->
<div id="btn" class="btn" onmousemove="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
<div id="btn" class="btn" onmousemove="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
<script>
    function mouseoverFn(btn,bgColor){
        //鼠标划过按钮背景变成红色
       btn.style.background=bgColor;
            }
     function mouseoutFn(btn,bgColor){
        //鼠标划过按钮背景变成红色
       btn.style.background=bgColor;
            }
</script>
</body>
复制代码

DOM0级事件

语法：ele事件=执行脚本

功能：在DOM对象上绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。

<head>
   <style>
       .lock{ width: 140px;height: 30px;line-height: 30px;background: #00f;color: #fff;font-size: 14px;text-align: center;border-radius: 5px;cursor: pointer;margin-top: 30px;}
       .unlock{ width: 140px;height: 30px;line-height: 30px;background: #666;color: #ccc;font-size: 14px;text-align: center;border-radius: 5px;cursor: pointer;margin-top: 30px;}
   </style>
</head>
<body>
    <div class="lock" id="btn">锁定</div>
<script>
    //获取按钮
    var btn=document.getElementById("btn");
    //给按钮绑定事件
    btn.onclick=function(){
        //判断如果按钮是锁定，则显示为解锁，变成灰色，否则显示为锁定，变为蓝色
       if (this.className=="lock") {
            this.className="unlock";
            this.innerHTML="解锁";
        }else{
            this.className="lock";
            this.innerHTML="锁定";
        }
    }
</script>复制代码

鼠标事件

window.onload 页面加载时触发

<head>
   <script>
       //页面加载时执行
       window.onload=function(){
           //获取box
            var box =document.getElementById("box");
            var clicked=function(){
                alert("我被点击了");
            }
            box.onclick=clicked;
       }
   </script>
</head>
   <div id="box">这是一个DIV</div>复制代码

onfucus 获得焦点时触发onblur 失去焦点时触发

<head>
<style>
       .box{padding: 50px;}
       .left,.tip{float: left;}
       .left{margin-right: 10px;}
       .tip{display: none;font-size: 14px;}
</style>
<script>
       //页面加载时执行
       window.onload=function(){
            //获取文本框，
            var  phone=document.getElementById("phone"),
                 tip=document.getElementById("tip");
            //给文本框绑定激活事件
            phone.onfocus=function(){
                //让tip显示出来
                tip.style.display="block";
                      }
            //给文本框绑定失去焦点事件
            phone.onblur=function(){
                //获取文本框的值,value用于获取表单元素的值
                var phoneVal=this.value;
                //判断手机号码是否是11位的数字
                //如果输入正确，则显示对号图标，否则显示错误图标
                if (phoneVal.length==11 && isNaN(phoneVal)==false) {
                    tip.innerHTML='<img src="img/1.png">'
                }else{
                      tip.innerHTML='<img src="img/2.png">'
                }
            }
       }
</script>
</head>
<body>
    <div class="box">
        <div class="left">
            <input type="text" id="phone" placeholder="请输入手机号码">
        </div>
        <div class="tip" id="tip">
           请输入有效的手机号码
        </div>
    </div>
</body>复制代码

onchange 事件

一般作用域select或者是checkbox或者是radio

<head>
<script>
        //页面加载
        window.onload=init;
        //初始化
        function init(){
            //获取下拉菜单
            var menu=document.getElementById("menu");
            //给菜单绑定change事件,一般作用域select或者是checkbox或者是radio
            menu.onchange=function(){
                //获取当前选中的值
                var bgcolor=this.value;
                //如果bgcolor为空，则下面的脚本将不执行
                if (bgcolor=="") return;
                //设置body的背景色
                document.body.style.background=bgcolor;
              }
        }
    </script>
</head>
<body>
     <div class="box">
        请选择您喜欢的背景色：
        <select name="" id="menu">
            <option value="">请选择</option>
            <option value="#f00">红色</option>
            <option value="#0f0">绿色</option>
            <option value="#00f">蓝色</option>
            <option value="#ff0">黄色</option>
            <option value="#ccc">灰色</option>
        </select>
     </div>
</body>复制代码

onmousedown，onmousemove，onmouseup

<head>
<style>
        .box{width: 200px;height: 200px;background: #f00;}
</style>
</head>
<body>
    <div class="box" id="box">拖动</div>
<script>
        var box=document.getElementById("box");
        //绑定按下的事件
        box.onmousedown=function(){
            console.log("我被按下");
        }
        //绑定移动的事件
        box.onmousemove=function(){
            console.log("我被移动了");
                    }
        //绑定松开事件
        box.onmouseup=function(){
            console.log("我被松开了");
                    }
        //绑定点击事件
        box.onclick=function(){
            console.log("我被点击了");
                    }
</script>复制代码

onresize：浏览器窗口的大小改变时触发

onscroll：拖动滚动条滚动时触发

<head>
<style>
        .box{width: 200px;height: 200px;background: #f00;}
        body{height: 2000px;}
</style>
</head>
<body>
    <div class="box" id="box">拖动</div>
<script>
        var box=document.getElementById("box");
        //浏览器窗口尺寸改变时触发
        window.onresize=function(){
            console.log("我的尺寸被该改变");
        }
        //拖动滚动条
        window.onscroll=function(){
            console.log("我被拖动了");
        }
</script>
</body>复制代码

键盘事件

onkeydown：在用户按下一个键盘按键时发生

onkeypress：在键盘按键被按下并释放一个键时发生

onkeyup：在键盘按键被松开时发生

keyCode：返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码。

<head> 
<style>
    .text span{font-weight: bold;color: #f00;}
    em{font-style: normal;}
    </style>
</head>
<body>
    <div>
        <p class="text">您还可以输入<span><em id="count">30</em>/30</span></p>
        <div class="input">
            <textarea name="" id="text" cols="70" rows="4"></textarea>
        </div>
    </div>
    <script>
        //获取文本框
        var text=document.getElementById("text");
        var  total=30;
        var  count=document.getElementById("count");
        //绑定键盘事件
        document.onkeyup=function(){
            //获取文本框的长度
            var len=text.value.length;
            var allow=total-len;
            count.innerHTML=allow; 
       }
    </script>
</body>复制代码