D2.DOM事件基础

一、注册事件-事件监听

• 给元素注册上事件
  语法：元素.addEventListener('事件', 要执行的函数)
  就是让浏览器检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件

三要素
1.事件源：触发事件的元素 按钮
2.事件类型：click点击事件 mouseenter鼠标经过
3.要执行的函数：事件触发了，要做啥，需要将代码写在该函数里面 alert('我被点了！')

• 事件监听版本
  DOM L0： 事件源.on事件 = function() { }
  DOM L2： 事件源.addEventListener(事件， 事件处理函数)
  L0 使用on方式注册存在的缺点：存有覆盖问题
  推荐注册事件使用L2 addEventListener 不存在覆盖问题

• 事件类型
  鼠标事件：1.click 鼠标点击 2.mouseenter 鼠标经过 3.mouseleave 鼠标离开
  焦点事件：1.focus 获得焦点 2.blur 失去焦点
  键盘事件：1.Keydown 键盘按下触发 2.Keyup 键盘抬起触发
  文本事件：input 用户输入事件

二、高阶函数

函数的高阶使用方式 ==> 把函数当成值来使用

• 函数表达式
  本质： 把匿名函数赋值给变量

        let fn = function () {
            console.log('这就是函数表达式')
        }
        // console.log(fn)
        fn()  //调用函数

• 回调函数
  把一个函数当成参数传递给另外一个函数，就说该函数是个回调函数
  比如有

        //1.注册事件   回调函数（大白话：回头在调用的函数）
        document.addEventListener('click', function () {
            // 该事件处理函数其实就是个回调函数
            console.log('哈哈')
        })


        // 2.定时器
        setInterval(function () {
            // 这个函数就是个回调函数
        }, 1000)        

三、环境对象-----this

函数内部，有一个特殊的变量 this ，称之为 环境对象。

事件处理函数中的this指向事件源

四、编程思想-------排他思想

排他思想：干掉所有人，复活我自己

• 案例：需求--点击按钮，让当前点击的按钮高亮（添加pink类名），其他元素不能高亮（移除pink类名）
  分析：
  1.先干掉所有人：把所有的按钮的pink类名给移出掉；所有的按钮 btns 伪数组 for循环遍历；2.再复活我自己；我自己 ==> 事件源 （触发事件的元素）

• 案例升级：
  排他思想做法2-升级（实际案例比较常用）
  优化做法：有局限性（适合的是高亮的一开始只有一个）
  步骤1：先找到高亮的元素，移出掉高亮的类名pink
  // querySelector('css选择器') 如果是类名，点别落下
  // classList.remove('类名') // 不需要点
  document.querySelector('.pink').classList.remove('pink')
  步骤2：把当前点击的元素添加上pink类名进行高亮
  this.classList.add('pink')