事件案例体验

最新推荐文章于 2024-07-14 15:54:59 发布

起风了9527

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量239

点赞数

分类专栏： DOM 文章标签： DOM 事件 js javascript 前端学习

本文链接：https://blog.csdn.net/qq_29036809/article/details/76649020

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

初级案例：关闭京东广告栏

需求：点击x号，隐藏盒子。

步骤：

1.获取事件源和相关元素

2.绑定事件

3.书写事件驱动程序

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .top-banner {
            background-color: pink;
            height: 80px;
        }
        .w {
            width: 1210px;
            margin: 10px auto;
            position: relative;
        }
        img {
            width: 1210px;
            height: 80px;
            background-color: blue;
        }
        a {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #fff;
            background-color: #000;
            text-decoration: none;
            width: 20px;
            height: 20px;
            font: 700 14px/20px "simsum";
            text-align: center;
        }
        .hide {
            display: none!important;
        }
    </style>
    <!--<script>-->
        <!--window.onload = function () {-->
            <!-- -->
        <!--}-->
    <!--</script>-->
</head>
<body>
    <div class="top-banner" id="topBanner">
        <div class="w">
            <img src="" alt=""/>
            <a href="#" id="closeBanner">×</a>
        </div>
    </div>


<script>
    //1.获取事件源和相关元素
    var closeBanner = document.getElementById("closeBanner");
    var topBanner = document.getElementById("topBanner");
    //2.绑定事件
    closeBanner.onclick = function () {
        //3.书写事件驱动程序
        //类控制
//        topBanner.className += " hide"; //保留原类名，添加新类名
        topBanner.className = "hide";//替换旧类名
//        topBanner.style.display = "none";
    }

</script>
</body>
</html>

中级案例：京东狗的颜色变化

需求：鼠标放到img上，变化图片颜色（其实为修改图片地址值，转换为另一张图片）。

步骤：

1.获取事件源和相关元素

2.绑定事件

3.书写事件驱动程序

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //window.onload页面加载完毕以后再执行此代码
        window.onload = function () {
                //1.获取事件源
            var img = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseover = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd2.png";
            this.src = "image/jd2.png";
            }


            //1.获取事件源
            var img = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseout = function () {
                //3.书写事件驱动程序(修改src)
                this.src = "image/jd1.png";
            }


    </script>
</head>
<body>

    <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>

</body>
</html>

起风了9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件案例体验

初级案例：关闭京东广告栏需求：点击x号，隐藏盒子。思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。步骤：1.获取事件源和相关元素2.绑定事件3.书写事件驱动程序<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *
复制链接

扫一扫