二、DOM-事件基础

槿川001

已于 2022-11-29 21:40:58 修改

阅读量51

点赞数

分类专栏： Web APIs 文章标签： javascript 前端 html

于 2022-11-29 21:29:09 首次发布

本文链接：https://blog.csdn.net/qq_55891636/article/details/128087667

版权

Web APIs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM-事件基础

事件

事件监听

让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法：
```
  对象名.addEventListener('事件'，要执行的函数)
```

事件监听版本

  事件源.on事件 = function(){}
  事件源.addEventListener(事件，事件处理函数)

事件类型

高阶函数

函数表达式

  let 函数名 = function(){}
  //类似于let num = 10，把函数当值来看

回调函数

如果将函数A作为参数传递给函数B时，我们称函数A为回调函数

  function fn(){
      console.log('我是回调函数')
  }
  //fn传递给了setInterval，fn就是回调函数
  setInterval(fn,1000)

环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

  let btn = document.querySelector('button')
  btn.addEventListener('cilck',function(){
      console.log(this)
  })
  //输出的是对象btn,因为btn调用了这个函数，所以this指向btn

编程思想

排他思想

干掉所有人（for循环移除所有人的类）

复活我自己（this指向我自己时添加上这个类）

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          .pink {
              background: pink;
          }
      </style>
  </head>
  
  <body>
      <button>第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
      <script>
          let btn = document.querySelectorAll('button')
          for (let i = 0; i < btn.length; i++) {
              btn[i].addEventListener('click', function () {
                  for (let j = 0; j < btn.length; j++) {
                      btn[j].classList.remove('pink')
                  }
                  //用这个for循环遍历所有的对象，移除pink类
                  this.classList.add('pink')
                  //this即点击的那一个加上pink类
              })
          }
      </script>
  </body>
  
  </html>

排他思想升级版（优化简洁版）

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          .pink {
              background: pink;
          }
      </style>
  </head>
  
  <body>
      <button class="pink">第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
      <script>
          let btn = document.querySelectorAll('button')
          for (let i = 0; i < btn.length; i++) {
              btn[i].addEventListener('cilck', function () {
                  document.querySelector('.pink').classList.remove('pink')
                  //查询到带pink类的那个，再将它的pink类移除
                  this.classList.add('pink')
                  //this即点击的那一个加上pink类
              })
          }
      </script>
  </body>
  
  </html>