事件监听（绑定）

事件和事件监听

事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

语法

元素对象.addEventListener（'事件类型'，要执行的函数）

注意：

事件类型要加引号
函数是点击之后再去执行，每
次点击都会执行一次

三要素

事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事

<button>点击</button>
<script>
     // 需求：点击按钮，弹出对话框
     const btn = document.querySelector('button')
     btn.addEventListener('click', function () {
         alert('good morining')
     })
</script>

关闭广告

 <div class="box">
        广告
        <button>X</button>
    </div>

    <script>
        // 需求：点击按钮，关闭box
        const btn = document.querySelector('button')
        const box = document.querySelector('.box')
        btn.addEventListener('click', function () {
            box.style.display = 'none'
        })
    </script>

核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

随机点名案例

<body>
    <h3>随机点名</h3>
    <div class="box">
        <span>名字是：</span><span class="uname">小李</span>
        <button class="open">open</button>
        <button class="close">close</button>
    </div>

    <script>
        const arr = ['小李', '小王', '小朱', '小杨', '小苏', '小赵']
        const uname = document.querySelector('.uname')
        // 定时器的全局变量
        let timeId = 0
        // 开始
        const open = document.querySelector('.open')
        open.addEventListener('click', function () {
            timeId = setInterval(function () {
                const random = parseInt(Math.random() * arr.length)
                uname.innerHTML = arr[random]
            }, 35)
        })
        const close = document.querySelector('.close')
        close.addEventListener('click', function () {
            clearInterval(timeId)
        })

关闭定时器时无法调用timeId，这是因为他为局部变量。解决方法是定义定时器的全局变量

事件类型

鼠标篇

click ——鼠标点击
mouseenter—— 鼠标经过
mouseleave ——鼠标离开

轮播图点击切换

鼠标点击切换图片

const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const bg = document.querySelector('.slider-footer')
// 1.右侧按钮
    const next = document.querySelector('.next')
    // 信号量  控制播放器图片张数
    let i = 0
    // 1.2点击事件
    next.addEventListener('click', function () {
      i++
      if (i >= sliderData.length) {
        i = 0
      }
      // 调用函数
      toggle()
    })
// 2.左侧
    const prev = document.querySelector('.prev')
    // 1.2点击事件
    prev.addEventListener('click', function () {
      i--
      if (i < 0) {
        i = sliderData.length - 1
      }
      // 调用函数
      toggle()

    })
// 声明渲染函数
    function toggle() {
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      bg.style.backgroundColor = sliderData[i].color
      // 更换小圆点
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }

声明渲染函数缩减代码

自动播放图片；鼠标经过或离开，开启或关闭定时器

// 自动播放
    let timeId = setInterval(function () {
      // 利用JS调用点击事件 click()
      next.click()
    }, 1000)

// 鼠标经过大盒子,停止定时器
    const slider = document.querySelector('.slider')
    slider.addEventListener('mouseenter', function () {
      // 停止定时器
      clearInterval(timeId)
    })
// 鼠标离开大盒子,开启定时器
    slider.addEventListener('mouseleave', function () {
      // 开启定时器
      timeId = setInterval(function () {
        // 利用JS调用点击事件 click()
        next.click()
      }, 1000)
    })

利用JS调用点击事件click()

焦点篇（表单获得光标）

focus ——获得焦点
blur ——失去焦点

<input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('focus', function () {
            console.log('❤❤❤');
        })
        input.addEventListener('blur', function () {
            console.log('???');
        })
    </script>

小米下拉列表

const input = document.querySelector('input')
const ul = document.querySelector('.list')
input.addEventListener('focus', function () {
    ul.style.display = 'block'
    input.classList.add('search')
})
input.addEventListener('blur', function () {
    ul.style.display = 'none'
    input.classList.remove('search')
})

input点击去掉黑框——outline: none;

键盘篇

Keydown ——键盘按下触发
Keyup ——键盘抬起触发

文本篇（表单输入文本）

input ——用户输入事件

<input type="text">

    <script>
        const input = document.querySelector('input')
        input.addEventListener('input', function () {
        	//打印输入的内容
            console.log(input.value)
        })
    </script>

input.value——文本域的输入内容

检测用户输入的字数

const total = document.querySelector('.total')
 const tx = document.querySelector('#tx')
 // 文本域获得焦点，total显示出来；否则隐藏
 tx.addEventListener('focus', function () {
     // 透明度
     total.style.opacity = 1
 })
 tx.addEventListener('blur', function () {
     total.style.opacity = 0
 })
 // 不断取得文本框里面的字符长度
 tx.addEventListener('input', function () {
     total.innerHTML = `${tx.value.length} / 200字`
 })

文本域的长度：文本域.value.length
点击input表单后才能获取input:focus{background-color:yellow;}
字符串也有长度total.innerHTML = ${tx.value.length} / 200字

事件对象

也是个对象，这个对象里有事件触发时的相关信息

比如按下回车键可以发布新闻；按下删除键进行删除

语法

元素.addEventListener('click',function(e){})

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

属性

type
获取当前的事件类型
clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
key
用户按下的键盘键的值

评论回车发布

// 按下回车发布评论
        const item = document.querySelector('.item')
        const text = document.querySelector('.text')
        tx.addEventListener('keyup', function (e) {
            // console.log(e.key)
            if (e.key === 'Enter') {
                if (tx.value.trim() !== '') {
                    item.style.display = 'block'
                    text.innerHTML = tx.value
                }
                // 按下回车后，清空文本域,字符统计复原
                tx.value = ''
                total.innerHTML = '0/200字'
            }
        })

用到按下键盘事件 keydown 或者 keyup 都可以
str.trim()——去除string左右两侧的空格

环境对象this

函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

// 每个函数里面都有this 环境对象
        /* function fn() {
            console.log(this) //指向window
        }
        fn() */
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            console.log(this)  //指向btn
        })

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

function fn() {
            console.log('我是回调函数') 
        }
setInterval(fn, 1000)
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
    console.log('我也是回调函数')  
})

回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

综合案例

    const a = document.querySelectorAll('.tab-nav a')
    // 遍历,绑定鼠标经过
    for (let i = 0; i < a.length; i++) {
      a[i].addEventListener('mouseenter', function () {
        document.querySelector('.tab-nav .active').classList.remove('active')
        // this===a[i]
        this.classList.add('active')

        document.querySelector('.tab-content .active').classList.remove('active')
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
      })
    }