JS中常用的事件操作

最新推荐文章于 2023-02-17 15:55:18 发布

前端菜菜阿海

最新推荐文章于 2023-02-17 15:55:18 发布

阅读量545

点赞数 4

分类专栏：前端学习之JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zxh996/article/details/118485873

版权

JS中常用的事件操作

前言
一、点击事件（导航栏内容切换功能）
二、移入移出事件（导航栏菜单下拉功能）
三、失去焦点事件（表单检验功能）
四、鼠标事件（鼠标跟随功能）
五、键盘事件（打飞机案例）
总结

前言

在前端的JavaScript学习中，事件操作是必不可少的，我为大家整理了以下的五个案例，可以快速的帮助大家理解事件操作的知识点，仅供参考学习。

一、点击事件（导航栏内容切换功能）

onclick ：当点击时触发，可以用于任何元素

    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        li {
    
            list-style: none;
        }
        .tab {
    
            width: 490px;
            margin: 50px auto;
        }
        .tab-top {
    
            height: 30px;
            border: 1px solid rebeccapurple;
            background-color: aquamarine;
        }
        .tab-top li {
    
            float: left;
            line-height: 31px;
            text-align: center;
            padding: 0 22px;
            cursor: pointer;
        }
        .tab-top .a{
    
            background-color: pink;
            color: #fff;
        }
        .content {
    
            display: none;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="tab-top">
        <ul>
            <li class="a">阿海</li>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
            <li>赵六</li>
            <li>孙七</li>
        </ul>
    </div>
    <div class="tab-bottom">
        <div class="content" style="display: block">1号床</div>
        <div class="content">2号床</div>
        <div class="content">3号床</div>
        <div class="content">4号床</div>
        <div class="content">5号床</div>
        <div class="content">6号床</div>
    </div>
</div>
<script

最低0.47元/天解锁文章

前端菜菜阿海

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS中常用的事件操作

JavaScript精选案例这个系列是在阿海前端学习中遇到的一些经典案例，具有很大的学习意义！JS中常用的事件操作JavaScript精选案例前言一、点击事件（导航栏切换）二、移入移出事件（导航栏菜单下拉功能）三、失去焦点事件四、鼠标事件五、键盘事件总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、点击事件（导航栏切换）
复制链接

扫一扫