JavaScript-事件监听

最新推荐文章于 2024-09-28 17:32:53 发布

新54

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量125

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_61897768/article/details/138141112

版权

文章介绍了如何在HTML中使用DOMAPI获取元素，并通过addEventListener方法为点击事件添加监听器，使广告在被点击时隐藏。

摘要由CSDN通过智能技术生成

创建两个盒子，第一个div是内容，第二个div是广告。当点击盒子，触发监听，广告会消失。

先用DOM获取两个盒子的元素。

然后通过addEventListener设置click点击事件执行函数，box1样式隐藏。

回调函数可以写成:

box.addEventListener('click',

()=>{

box1.style.display = 'none'

})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
    <style>
        .button{}

    </style>
</head>
<body>

<!--<button class=""></button>-->
<div class="box">xxxx
<div class="box1">我是广告</div>
</div>
<!--给DOM元素添加事件监听-->
<!--让程序检测是否有事件发生，一旦事件触发，立即调用一个函数做出响应，也成为绑定事件或者注册事件-->
<!--语法   元素对象.addEventListener('事件类型',要执行的函数)-->
<script>
    //事件监听是什么？就是让程序检测是否有事件产生，一旦有事件触发就立即调用一个函数作出回应，也成为注册事件
    //三要素：事件源,发生在哪，哪就是事件源
    //事件类型（用什么方式触发，鼠标点击还是？）
    //事件处理程序（要做什么事）


    //1.获取元素
    const box1 = document.querySelector('.box1')
    //2.
    const box=document.querySelector('.box')
    box.addEventListener('click',function () {
    box1.style.display = 'none'
    })


</script>





</body>
</html>