五、JavaScript 事件——鼠标事件，键盘事件，冒泡事件

最新推荐文章于 2023-04-25 15:08:18 发布

小羊爱学习.

最新推荐文章于 2023-04-25 15:08:18 发布

阅读量1.2k

点赞数 1

分类专栏：学习笔记——HTML，css，js 文章标签： js

本文链接：https://blog.youkuaiyun.com/m0_59150380/article/details/120121455

版权

学习笔记——HTML，css，js 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了JavaScript中的事件处理，包括事件源、事件类型和事件处理程序。讲解了HTML元素事件属性、元素对象的事件属性及addEventListener的事件绑定方式，并通过多个实例展示了鼠标事件（如单击、双击、右键等）、键盘事件和表单事件的用法。此外，还探讨了事件冒泡的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 事件的定义

当我们对 HTML 当中的标签对象进行操作时，可以触发一系列的事件，例如：单击时，双击时，回车时，移入移出时，均可触发js事件

1.1 页面元素

所有html当中的标签，都是页面元素。

div

button

img

h1~h6

p

table

form

……

1.2 可发生的事件

单击

双击

回车

移入

移出

右键

……

2. 事件三要素

2.1 事件源

我们正在操作的元素

<!--我们要操作一个div-->
<div id="box"></div>

2.2 事件类型

我们对该元素执行了什么操作

//我们想要单击这个div元素对象
box.onclick = function(){};

2.3 事件处理程序

当我们对该元素执行操作时，发生了什么

//当我们单击div时，它变成了绿色
box.onclick = function(){
    this.style.backgroundColor = 'green';
}

3. 事件三种绑定方式

3.1 HTML元素事件属性

直接给 html 标签添加“事件属性”。

<div id="box" οnclick="alert('第一种事件绑定形式')"></div>

3.2 元素对象的事件属性

在 js 中获取元素，然后进行事件绑定。

<!--准备标签-->
<div id="box"></div>

<script type="text/javascript">

    //获取元素节点
   var box = document.getElementById("box");
   
   //绑定单击事件
   box.onclick = function(){
        alert('第二种绑定形式');
   }
   
</script>

3.3 addEventListener

<!--准备标签-->
<div id="box"></div>

<script type="text/javascript">

    //获取元素节点
   var box = document.getElementById("box");
   
   //绑定单击事件
   box.addEventListener('click', function(){
        alert('第三种事件绑定形式');
   });
   
</script>

4. 事件分类

4.1 鼠标事件

4.1.1 单击事件

案例：【onclick】编写一个单击div更换背景颜色的小案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>JavaScript：单击div更换背景颜色</title>
        <style>
            .box{
                width:200px;
                height:200px;
                border:1px solid red;
                float:left;
                margin:10px;
            }
            
            #one{background-color:red;}
            #two{background-color:green;}
            #three{background-color:blue;}
            #four{background-color:pink;}
            
        </style>
    </head>
    <body>
        <!--准备div盒子-->
        <div class="box" id="one"></div>
        <div class="box" id="two"></div>
        <div class="box" id="three"></div>
        <div class="box" id="four"></div>
        
        <script type="text/javascript">
            
            //获取所有元素
            var box = document.getElementsByClassName('box');
            
            //循环
            for(var i=0; i<box.length; i++){
                
                //为每一个 div 盒子添加单击事件
                box[i].onclick = function(){
                    this.style.backgroundColor = 'cyan';
                }
            }
            
        </script>
    </body>
</html>

案例升级：

如果想要实现单击 div 将整个窗体的颜色设置为 div 的颜色，请问该如何实现呢？

4.1.2 双击事件

案例：【ondblclick】双击图片更换为另一张图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：双击更换图片 </title>
    </head>
    <body>
        <img src="./images/full_heart.png" width="300" alt="">

        <script>
            //1.获取图片节点
            var img = document.images;

            //2.添加双击事件
            img[0].ondblclick = function(){

                //3.更换src属性
                this.src = "../images/broken_heart.png";
            }
        </script>
    </body>
</html>

4.1.3 右键事件

案例：【oncontextmenu】自定义一个右键菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>JavaScript：右键事件</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #menu{
                border:1px solid #ccc;
                float:left;
                list-style:none;
                text-align:center;
                position:absolute;
                display:none;
                box-shadow:5px 5px 12px #ccc;
            }
            #menu li{
                padding:5px 50px;
                border-bottom:1px solid #ccc;
            }
            #menu li:hover{
                background-color:#aaa;
                color:white;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>打开</li>
            <li>复制</li>
            <li>粘贴</li>
            <li>剪切</li>
            <li>删除</li>
            <li>属性</li>
        </ul>
        
        <script type="text/javascript">
        
            //获取菜单元素
            var menu = document.getElementById('menu');
            
            //添加右击事件（ev：事件对象属性）
            document.oncontextmenu = function(ev){
                
                //获取鼠标右击x、y轴坐标
                var x = ev.clientX;
                var y = ev.clientY;
                
                //显示菜单
                menu.style.display = 'block';
                menu.style.left = x+'px';
                menu.style.top = y+'px';
                
                //阻止屏幕默认菜单
                return false;
            }
            
            //添加鼠标单击事件
            document.onclick = function(){
                
                //隐藏菜单
                menu.style.display = 'none';
            }
        </script>
    </body>
</html>

4.1.4 鼠标移入移出事件

案例：【onmouseover / onmouseout】鼠标移入div显示图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：鼠标移入显示图片 </title>
        <style>
            div{
                width:200px;
                height:200px;
                float:left;
                margin:10px;
                border:1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="one"></div>
        
        <script>
            //获取box元素
            var divs = document.getElementsByTagName('div');
            
            //给四个div添加鼠标移入事件
            divs[0].onmouseover = function(){
                this.style.boxShadow = "5px 5px 10px #ccc";
                this.style.background = "url(../images/1.jpg)";
            }
            
            //给四个div添加鼠标移出事件
            divs[0].onmouseout = function(){
                this.style.boxShadow = "";
                this.style.background = "";
            }
        </script>
    </body>
</html>

4.1.5 鼠标按下抬起事件

案例：【onmousedown / onmouseup】鼠标按下修改div颜色，抬起恢复原来的颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：鼠标按下和抬起 </title>
        <style>
            #box{
                width:200px;
                height:200px;
                background:#ccc;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>

        <script>
            var box = document.getElementById('box');
            box.onmousedown = function(){
                this.style.background = 'pink';
            }
            box.onmouseup = function(){
                this.style.background = '#ccc';
            }
            
        </script>
    </body>
</html>

4.1.6 鼠标移动事件

案例：【onmousemove】鼠标按下div时，可以移动div滑块，鼠标抬起时，事件停止

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>js鼠标事件：鼠标移动</title>
        <style type="text/css">
            *{
                margin:0px;
                padding:0px;
            }
            #box{
                width:200px;
                height:200px;
                background-color:cyan;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <!-- 
            offsetLeft  //距离x轴的偏移量（相对于父级）
            offsetTop   //距离y轴的偏移量（相对于父级）
            offsetWidth //元素的宽度
            offsetHeight//元素的高度
        -->
        <!--需要移动的box盒子-->
        <div id="box"></div>

        <script type="text/javascript">
            
            //获取盒子元素
            var box = document.getElementById('box');

            //声明为全局变量
            var l = 0;
            var t = 0;
            var x = 0;
            var y = 0;
            var isDown = false; //判断鼠标左键是否按下

            //绑定按下事件
            box.onmousedown = function(ev){
                
                //获取div距离左侧和顶部的偏移量
                l = this.offsetLeft;
                t = this.offsetTop;

                //获取鼠标距离左侧和顶部的偏移量
                x = ev.clientX;
                y = ev.clientY;

                //修改鼠标按下变量
                isDown = true;
            }

            //绑定鼠标的移动事件
            window.onmousemove = function(ev){

                //检测鼠标左键是否按下
                if(!isDown) return;

                //获取鼠标移动之后的偏移量
                var nx = ev.clientX;
                var ny = ev.clientY;

                //求得div移动之后的宽度
                var nl = nx - (x - l);
                var nt = ny - (y - t);

                //设置样式
                box.style.left = nl + 'px';
                box.style.top = nt + 'px';
            }

            //绑定鼠标的抬起事件
            box.onmouseup = function(){
                isDown = false;
            }
        </script>
    </body>
</html>

4.2 键盘事件

当我们按下键盘上的键位时，都会触发一个键盘事件。

4.2.1 键盘与键盘码

【key/keycode】要像准确的知道按下了哪个键盘键位，就需要通过键盘码来获取。

//绑定键盘事件
window.onkeydown = function(ev){

  //查看键名
  console.log(ev.key);

  //查看键盘码
  console.log(ev.keyCode);
}

4.2.2 组合键

案例：【ctrlKey / altKey / shiftKey】游戏中会使用到很多组合键，通过以下案例可以实现。

//绑定键盘事件
window.onkeydown = function(ev){

    //按下ctrlKey
    console.log(ev.ctrlKey);

    //按下altKey
    console.log(ev.altKey);

    //按下shiftKey
    console.log(ev.shiftKey);

    //加血 ctrl + q
    if(ev.ctrlKey==true && e.keyCode == 81){
        alert('加血中……');
    }

    //加蓝 shift + e
    if(ev.shiftKey==true && e.keyCode == 69){
        alert('加蓝中……');
    }

    //放技能 alt + r
    if(ev.altKey==true && e.keyCode == 82){
        alert('正在放技能……');
    }

    //放大招 ctrl + shift + alt + c
    if(ev.ctrlKey==true && ev.shiftKey==true && ev.altKey==true && e.keyCode == 67){
        alert('正在放大招……');
    }
}

4.2.3 键盘按下抬起事件

案例：【onkeydown / onkeyup】完成一个使用键盘上下左右移动div的小案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：键盘事件 </title>
        <style>
            #box{
                width:200px;
                height:200px;
                background:#ccc;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script>
            var box = document.getElementById('box');

            //var t = box.offsetTop;    //获取盒子距离顶部的间距
            //var l = box.offsetLeft;   //获取盒子距离左侧的间距

            var t = 0;
            var l = 0;

            //键盘按下事件
            window.onkeydown = function(ev){

                //上38  下40  左37  右39
                switch(ev.keyCode){
                    case 38:
                        t-=10;
                        box.style.top = t+'px';
                        break;
                    case 40:
                        t+=10;
                        box.style.top = t+'px';
                        break;
                    case 37:
                        l-=10;
                        box.style.left = l+'px';
                        break;
                    case 39:
                        l+=10;
                        box.style.left = l+'px';
                        break;
                }
            }
        </script>
    </body>
</html>

4.3 表单事件

4.3.1 获得与失去焦点事件

案例：【onfocus / onblur】失去焦点时，判断用户名和密码的格式是否正确。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：表单事件 </title>
        <style type="text/css">
            .active{
                border:1px solid red;
                background-color:green;
            }
        </style>
    </head>
    <body>
        <center>
            <h2>登录信息</h2>
            <table border='1' width='500' cellspacing='0' cellpadding='10'>
                <form action='#' method='post'>
                    <tr>
                        <td>账号：</td>
                        <td><input type='text' name='username' value=''/></td>
                        <td width='200'><span></span></td>
                    </tr>
                    <tr align='center'>
                        <td colspan='3'>
                            <input type="submit" value="登录">
                            <input type="reset" value="重置">
                        </td>
                    </tr>
                </form>
            </table>
        </center>
        <script>

            //获取span
            var info1 = document.getElementsByTagName('span')[0];

            //1.获取账号输入框
            var username = document.getElementsByName('username')[0];

            //获取焦点事件
            username.onfocus = function(){
                
                this.style.border = '2px solid red';
            }

            //失去焦点事件
            username.onblur = function(){

                //获取值
                var val = this.value;

                //判断长度
                if(val.length<6 || val.length>16){

                    //给info写入内容
                    info1.innerHTML = '请输入6~16位账号';
                    info1.style.color = 'red';
                    username.style.border = '2px solid red';
                }else{
                    //给info写入内容
                    info1.innerHTML = '✅';
                    info1.style.color = 'green';
                    username.style.border = '2px solid green';
                }
            }
        </script>
    </body>
</html>

5. 事件冒泡

当我们出发某一个元素的事件时，会自动触发该元素的所有先辈元素的同类型事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：事件冒泡 </title>
        <style type="text/css">
            div{
                position:absolute;
                left:50px;
                top:50px;
                border-radius:50%;
            }
            #five{
                width:500px;
                height:500px;
                background:green;
                left:400px;
            }
            #four{
                width:400px;
                height:400px;
                background:blue;
            }
            #three{
                width:300px;
                height:300px;
                background:purple;
            }
            #two{
                width:200px;
                height:200px;
                background:cyan;
            }
            #one{
                width:100px;
                height:100px;
                background:red;
            }
        </style>
    </head>
    <body>
        <div id="five">
            <div id="four">
                <div id="three">
                    <div id="two">
                        <div id="one"></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            //1.获取所有div元素
            var divs = document.getElementsByTagName('div');

            //2.遍历所有div
            for(var i=0; i<divs.length; i++){

                //3.遍历添加单击事件
                divs[i].onclick = function(e){

                    //4.修改每一个div的背景色为黑色
                    this.style.backgroundColor = 'black';

                    //5.阻止事件冒泡
                    e.stopPropagation();
                }
            }
            console.log(divs);
        </script>
    </body>
</html>