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')

你可能感兴趣的:(D2.DOM事件基础)