javascript Web API：EventTarget.addEventListener()函数

听海边涛声

已于 2024-06-12 12:05:21 修改

阅读量287

点赞数 5

文章标签：前端 javascript 开发语言

于 2024-06-12 12:04:02 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/139622846

版权

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）。

示例：
html显示了4个按钮，要实现的效果：点击哪个按钮，就改变哪个按钮的颜色：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pink {
      background-color: pink;
    }
  </style>
</head>

<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    // 获取所有按钮的列表
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++) {
      // 给收到点击的按钮增加点击事件回调函数
      bts[i].addEventListener('click', function () {
        // 将class名称是pink的按钮的类名设置为空
        document.querySelector('.pink').className = ''
        // 将点击的button的类名改为pink，这样就可以用样式改变颜色了
        this.className = 'pink'
      })
    }
  </script>
</body>

</html>