JS事件基础

事件

@jarringslee

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

事件监听（绑定）

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，检测到事件发生（被触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

元素对象.addEventListener('事件类型', 要执行的函数)

        const arr = [ .... ]const start = document.querySelector('.start')const qs = document.querySelector('.qs')let go = nulllet random = null;start.addEventListener('click', function () {go = setInterval(function () {random = parseInt(Math.random() * arr.length)qs.innerHTML = arr[random]}, 50)if (arr.length === 1) start.disabled = end.disabled = true})const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(go)arr.splice(random, 1)})

事件监听三要素：

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

以前的方法：采用赋值的形式。弊端：后面会将前面覆盖掉

事件源.on事件 = function(){ }
btn.onclick = function(){......
}

事件类型

事件类型	事件英文名	触发时机
鼠标事件 鼠标触发	click	鼠标点击
	mouseenter	鼠标经过
	mouseleave	鼠标离开
焦点事件 表单获得光标	focus	表单获得焦点
	blur	表单失去焦点
键盘事件 键盘触发	keydown	键盘按下触发
	keyup	键盘抬起触发
文本事件 表单输入触发	input	表单输入触发 / 用户输入事件

小案例：轮播图

• 每隔两秒自动切换下一张；

• 点击右侧/左侧按钮手动切换下一张/上一张；

• 鼠标移到图片上停止自动切换，鼠标移开恢复自动切换。

  <script>// 1. 初始数据：轮播图的图像路径、标题文本、背景颜色const sliderData = [{ url: './images/slider01.jpg', title: '凤凰传奇陪你过大年', color: 'rgb(100, 67, 68)' },// ......]// 2. 当前轮播图索引初始化为0let i = 0// 3. 获取轮播图中需要操作的 DOM 元素const img = document.querySelector('.slider img')        // 图片元素const p = document.querySelector('.slider p')            // 标题文字元素const next = document.querySelector('.next')             // “下一张”按钮const prev = document.querySelector('.prev')             // “上一张”按钮const slider = document.querySelector('.slider')         // 整个轮播区域// 4. 点击“下一张”按钮时切换到下一张图片next.addEventListener('click', function () {i++  // 当前索引加一if (i >= sliderData.length) i = 0  // 超出最大索引则回到第一张// 替换图片地址、标题img.src = sliderData[i].urlp.innerHTML = sliderData[i].title// 更新下方指示器的样式document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')})// 5. 点击“上一张”按钮时切换到上一张图片prev.addEventListener('click', function () {i--  // 当前索引减一if (i < 0) i = sliderData.length - 1  // 小于0则切换到最后一张img.src = sliderData[i].urlp.innerHTML = sliderData[i].titledocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')})// 6. 自动轮播功能（定时器模拟“点击右侧按钮”）let time = setInterval(function () {next.click()  // 每隔1秒自动点击“下一张”}, 1000)// 7. 鼠标移入时暂停自动播放slider.addEventListener('mouseenter', function () {clearInterval(time)  // 清除计时器，停止轮播})// 8. 鼠标移出后恢复自动播放（重新设置计时器）slider.addEventListener('mouseleave', function () {time = setInterval(function () {next.click()}, 1000)})</script>

  //实时打印输入内容
  input.addEventListener('input', function () {console.log(input.value)})
  

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。比如在一个“鼠标点击”事件中，事件对象将会存储“鼠标点击了哪里”等信息。

使用场景：

• 判断用户按下了哪个键，如：只有按下回车才能发布消息
• 判断鼠标点击了哪个元素，从而做出相应的操作

获取事件的语法：

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

元素.addEventListener('click', function(e){
} ) console.log(e.key)
//打印当前用户按下的键盘值

获取事件对象的常用属性：

部分常用属性：

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

去除字符串左右两边空格： 对象.trim()

const str = '    123   456   '
console.log(syr.trim())
//只会输出'123   456'

环境对象this

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

• 函数调用方式不同，this指代的也有所不同

• 谁调用函数，this就是谁

  • 没有任何前缀的函数默认是windows在调用

  • const btn = document.querySelector('button')
    btn.addEventListener('click', function fn() {console.log(this)this.style.background = 'blue'
    })//这里的this就是调用对象的btn
    

回调函数

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

function fn (){//这就是一个回调函数
}
setInterval (fn, 1000)

事件监听中，例如’click’按下按钮出发的function函数也属于回调函数。

事件监听小案例：全选框的逻辑

    <table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"><span class="all">全选</span></th><th>商品</th></tr><tr><td><input type="checkbox" name="check" class="ck"><td>小米手机</td></td></tr><tr><td><input type="checkbox" name="check" class="ck"><td>小米手机</td></td></tr><tr><td><input type="checkbox" name="check" class="ck"><td>小米手机</td></td></tr></table><script>const checkAll = document.querySelector('#checkAll')const ck = document.querySelectorAll('.ck')//第一段逻辑：如果点击勾选了「全选」，就让所有子选项也变成 checked = true；
//如果点击取消「全选」，就让所有子选项 checked = false。
//既实现了“勾选全选 -> 勾选所有项”，也实现了“取消全选 -> 取消所有项”。checkAll.addEventListener('click', function () {for (let i = 0; i < ck.length; i++) {ck[i].checked = checkAll.checked;}})//第二段逻辑：每次有子项点击时，都判断是不是所有子项都 checked == true；
////如果是，那就设置 checkAll.checked = true；
//如果有任意一个 checked == false，就设置 checkAll.checked = false。
//既实现了“只要有一个子项取消，全选取消”，也实现了“所有子项都手动勾选上后，全选会自动被勾上”。        for (let i = 0; i < ck.length; i++) {ck[i].addEventListener('click', function () {let flag = truefor (let j = 0; j < ck.length; j++) {if (ck[j].checked == false) {flag = false;break;}}checkAll.checked = flag;})}</script>