1. 笔耕屋首页
  2. 学习笔记

事件监听与回调函数

霍欣标 • • 学习笔记

事件是在编程时系统内发生的动作或者发生的事情，比如：用户在网页上单击一个按钮。

事件监听是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件，比如：鼠标经过显示下拉菜单；点击可以播放轮播图等。

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

事件监听三要素：

【事件源】那个dom元素被事件触发了，要获取dom元素

【事件类型】用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

【事件调用的函数】要做什么事

事件监听绑定

// 1. 事件源 按钮
// 2. 事件类型 点击鼠标
// 3. 事件处理程序 弹出对话框 
const btn = document.querySelector('button')
// 事件监听             点击  , 执行函数      
btn.addEventListener('click', function () {
  alert('你好')
})
<button>点击</button>

事件监听版本

DOM LO版本和DOM L2 的区别是on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用。

DOM LO： 事件源.on事件=function(){}

DOM L2：事件源.addEventListener(事件,事件处理函数)

发展史：

DOM LO：是DOM的发展的第一个版本；L：level

DOM L1：DOM级别1于1998年10月1日成为W3C惟荐标准

DOM L2：使用addEventListener注册事件

DOM L3：DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

案例：京东点击关闭顶部广告

Demo

// 1. 事件源 按钮
// 2. 事件类型 点击鼠标
// 3. 事件处理程序 弹出对话框 
const shut = document.querySelector('.shut')
// 关闭的是大盒子
const box = document.querySelector('.box')

// 事件监听             点击   , 执行函数
shut.addEventListener('click', function () {
  box.style.display = 'none' // 大盒子隐藏
})

案例：随机点名

Demo

① 点击开始按钮随机抽取数组的一个数据，放到页面中

② 点击结束按钮删除数组当前抽取的一个数据

③ 当抽取到最后一个数据的时候，两个按钮同时禁用（写点开始里面，只剩最后一个数据不用抽了）

核心：利用定时器快速展示，停止定时器结束展示
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']

// 获取名字位置元素
const qs = document.querySelector('.qs')
// 1. 获取按钮对象
const start = document.querySelector('.start')
let timerId = 0 // 定时器的全局变量
let random = 0 // 数据数据下标也要全局变量

// 开始按钮模块
// 2. 添加点击事件
start.addEventListener('click', function () {
  // 开启定时器
  timerId = setInterval(function () {
    // 随机数
    random = parseInt(Math.random() * arr.length)
    // 得到数组中随机名字放在 .qs盒子里
    qs.innerHTML = arr[random]
    // 如果数组里面只有一个值，让两个按钮禁用
    if (arr.length === 1) {
      // 按钮 1 = 按钮 2 =  true都禁用
      start.disabled = end.disabled = true
    }
  })
}, 35)

// 关闭按钮模块
const end = document.querySelector('.end')
// 2.1 添加事件，关闭定时器
end.addEventListener('click', function () {
  clearInterval(timerId)
  // 结束，删除当前抽到的数组的元素
  arr.splice(random, 1)
})

事件类型

事件分为四大类：鼠标事件、焦点事件、键盘事件、文本事件。

类型 代码 说明 触发
鼠标 click 鼠标点击 鼠标触发
mouseenter 鼠标经过
mouseleave 鼠标离开
焦点 focus 获得焦点 表单获得光标
blur 失去焦点
键盘 Keydown 键盘按下触发 键盘触发
Keyup 键盘抬起触发
文本 input 用户输入事件 表单输入触发
submit 表单提交时触发

鼠标经过离开

const div = document.querySelector('div')
// 鼠标经过
div.addEventListener('mouseenter', function () {
  console.log('轻轻的我来了')
})

//鼠标离开
div.addEventListener('mouseleave', function () {
  console.log('轻轻的我走了')
})

鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouselegve 沒有冒泡效果（推荐）

案例：轮播图完整版点击切换

需求：当点击左右的按钮，可以切换轮播图 Demo

分析：

① 右侧按钮点击，变量++，如果大于等于8，则复原0

② 左侧按钮点击，变量--，如果小于0，则复原最后一张

③ 鼠标经过暂停定时器

④ 鼠标离开开启定时器

// 1. 初始数据
const data = [
  { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
  { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
  { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
  { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
  { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
  { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
  { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
  { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
]
// 获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')

// 1. 左右按钮业务
// 1.1 获取右侧按钮
const next = document.querySelector('.next')
let i = 0 // 信号量 控制播放图片张数
// 1.2 注册点击事件
next.addEventListener('click', function () {
  // console.log(11)
  i++
  // 1.6 判断条件 如果大于8就复原归零
  i = i >= data.length ? 0 : i
  // 1.3 得到对应的对象
  // console.log(data[i])
  toggle() // 调用函数
})

// 1. 左侧按钮业务
// 1.1 获取左侧按钮
const prev = document.querySelector('.prev')
// 1.2 注册点击事件
prev.addEventListener('click', function () {
  // console.log(11)
  i--
  // 1.6 判断条件 如果小于0，索引号则爬到最后一张 7
  i = i < 0 ? data.length - 1 : i
  // 1.3 得到对应的对象
  // console.log(data[i])
  toggle() // 调用函数
})

// 声明一个渲染函数作为复用
function toggle() {
  // 1.4 渲染对应的数据
  img.src = data[i].url
  p.innerHTML = data[i].title
  footer.style.backgroundColor = data[i].color
  // 1.5 更换小圆点 先移除原来的css类名，当前的小li再添加类名
  document.querySelector('.slider-indicator .active').classList.remove('active')
  document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}

// 3. 自动播放模块
let timerId = setInterval(function () {
  // 利用js自动调用点击事件 click()必需加小括号调用函数
  next.click()
}, 1000)

// 4. 鼠标经过大盒子，停止定时器
const slider = document.querySelector('.slider')
// 注册事件
slider.addEventListener('mouseenter', function () {
  // 停止定时器
  clearInterval(timerId)
})

// 5. 鼠标离开大盒子，开启定时器
// 注册事件
slider.addEventListener('mouseleave', function () {
  // 开启定时器
  timerId = setInterval(function () {
    // 停止定时器
    clearInterval(timerId)
    // 打开定时器
    next.click()
  }, 1000)
})

表单光标获得失去

const input = document.querySelector('input')
// 表单里触发焦点
input.addEventListener('focus', function () {
  console.log('有焦点触发')
})

  //表单里失去焦点事件
input.addEventListener('blur', function () {
  console.log('失去焦点')
})

案例：小米搜索框

需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单。Demo

// 1. 获取文本框（如果有多个文本框，使用属性选择器[type=search]）
const input = document.querySelector('[type=search]')
// 1.1 获取ul元素
const ul = document.querySelector('.result-list')

// 2. 监听事件 获得焦点
input.addEventListener('focus', function () {
  // 下拉框的内容不隐藏
  ul.style.display = 'block'
  // 文本框添加新的类名,覆盖旧样式
  input.classList.add('search')
})

// 3. 监听事件 失去焦点
input.addEventListener('blur', function () {
  // 下拉框的内容隐藏
  ul.style.display = 'none'
  // 文本框删除类，复原原来的样式
  input.classList.remove('search')
})

键盘按下弹起

const input = document.querySelector('input')
input.addEventListener('keydown', function () {
  console.log('键盘按下了')
})

input.addEventListener('keyup', function () {
  console.log('键盘按弹起了')
})
<input type="text">

表单输入触发

const input = document.querySelector('input')
input.addEventListener('input', function () {
  // 控制台打印用户输入的内容
  console.log(input.value)
})

案例：评论字数统计

需求：用户输入文字，可以计算用户输入的字数 Demo

分析：

① 判断用输入事件input

② 不断取得文本框里面的字符长度，文本域.value.length

③ 把获得数字给下面文本框

// 获取元素
const tx = document.querySelector('#tx')
const total = document.querySelector('.total')

// 1. 当文本域获得焦点，就让total(0/200字)显示出来
tx.addEventListener('focus', function () {
  // 改为完全不透明
  total.style.opacity = 1
})

// 2. 当文本域失去焦点，就让total(0/200字)隐藏起来
tx.addEventListener('blur', function () {
  // 改为完全透明
  total.style.opacity = 0
})

// 3. 检测用户输入
tx.addEventListener('input', function () {
  // 修改total里面内容 = 得到输入的长度（字符串也是有长度的）
  total.innerHTML = `${tx.value.length}/200字`
})
<input type="text">
input {
  width: 200px;
  transition: all .3;
}

/* focus 是伪类选择器 获得焦点改变样式 */
input:focus {
  width: 300px;
}

事件对象

事件也个是对象，这个对象里有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。

使用场景：

可以判断用户按下哪个键，比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素，从而做相应的操作

获取事件对象

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

const btn = document.querySelector('button')
btn.addEventListener('click', function (e) {
  console.log(e)
})
e.target获得事件对象DOM元素
e.target.tagName获得事件对象元素的html标签，一定是大写
e.target.dataset获得事件对象元素的自定义属性

事件对象常用属性

部分常用属性

常用属性属性说明
type获取当前的事件类型
clientX / clientY获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY获取光标相对于当前DOM元素左上角的位置
key用户按下的键盘键的值（不提倡使用keyCode）
const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
//判断事件对象里按键是不是回车,  (e.key是获取用户输入的值)
  if (e.key === 'Enter') {
    console.log('我按下了回车键')
  }
})

去除字符串左右两边的空格

// 去除字符串左右两边的空格
const str = '      pink '
console.log(str.trim())

案例：评论回车发布

需求：按下回车键盘，可以发布信息 Demo

分析：

①：用到按下键盘事件 keydown 或者 keyup 都可以

②：如果用户按下的是回车键盘，则发布信息

③：让留言信息模块显示，把拿到的数据渲染到对应标签内部

// 获取元素
const tx = document.querySelector('#tx')
const total = document.querySelector('.total')
const item = document.querySelector('.item')
const text = document.querySelector('.text')

// 1. 当文本域获得焦点，就让total(0/200字)显示出来
tx.addEventListener('focus', function () {
  // 改为完全不透明
  total.style.opacity = 1
})

// 2. 当文本域失去焦点，就让total(0/200字)隐藏起来
tx.addEventListener('blur', function () {
  // 改为完全透明
  total.style.opacity = 0
})

// 3. 检测用户输入
tx.addEventListener('input', function () {
  // 修改total里面内容 = 得到输入的长度（字符串也是有长度的）
  total.innerHTML = `${tx.value.length}/200字`
})

// 4. 按下回车发布评论
tx.addEventListener('keyup', function (e) {
  // 只有按下回车键才能触发
  if (e.key === 'Enter') {
    // 判断多行文本框的值去除左右空格 不等于空，则执行里面的代码
    // (tx.value.trim() !== '') 文本域为空是false 就不执行
    if (tx.value.trim()) {
      item.style.display = 'block'
      // 评论的内容显示在评论列表中
      text.innerHTML = tx.value
    }
    // 清空多行文本框的内容
    tx.value = ''
    // 按下回车之后，统计字符复原
    total.innerHTML = '0/200字'
  }
})

环境对象

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

// 每个函数都有变量this，环境对象普通函数里面的this指向的是windosw
function fn() {
  console.log(this)
}
// 常用调用
fn()
// 写法的完整版
window.fn()
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
  console.log(this)        // btn
  this.style.color = 'red' // btn按钮变为红色
})

回调函数

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

// fn()是函数 A，
function fn() {
  console.log('我是回调函数')
}
// setInterval()是函数 B
// setInterval里面的fn是回调函数，值给了B
setInterval(fn, 1000)
/* ------------------------------------------------------ */
const box = document.querySelector('div')
// function() 是函数 A
// addEventListener()是函数 B
// function()回调函数，值给了 B
box.addEventListener('click', function () {
  console.log('我也是回调函数')
})

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

伪类选择器checked拓展

<input type="checkbox" name="" id="" class="ck99">
/* 被勾选的复选框,改变样式 */
.ck99:checked {
  width: 200px;
  height: 200px;
}
// 1. 获取全选复选框
const checkAll = document.querySelector('#checkAll')
// 2. 获取所有的小复选框
const cks = document.querySelectorAll('.ck')
// 3. 点击大复选框 注册事件

checkAll.addEventListener('click', function () {
  // 得到当前大复选框的选中状态
  // console.log(this.checked) // 得到的是 true 或者是 false
  // 4. 遍历所有的小复选框，让其的checked = 大复选框的 checked
  for (let i = 0; i < cks.length; i++) {
    cks[i].checked = this.checked
  }
})

// 5.小复选框控制大复选框
for (let i = 0; i < cks.length; i++) {
  // 5.1 给所有的小复选框添加点击事件
  cks[i].addEventListener('click', function () {
    // 判断选中的小复框的个数等于总的小复选框的个数
    // console.log(document.querySelectorAll('.ck:checked').length)
    // console.log(document.querySelectorAll('.ck:checked').length === cks.length) //对的或者是错的
    // 大复选框的选中状态 = true and false, 获取所有小复选框（数组）的选择状态长度全等于cks.length
    checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
  })
}

综合案例：Tab栏切换

需求：鼠标经过不同的选项卡，底部可以显示 不同的内容 Demo

// 1. 选项模块，给5个链接绑定鼠标经过事件
// 1.1 获取选项模块元素
const as = document.querySelectorAll('.tab-nav a')
for (let i = 0; i < as.length; i++) {
  // 5个选项绑定鼠标经过事件
  as[i].addEventListener('mouseenter', function () {
    // 移除类
    document.querySelector('.tab-nav .active').classList.remove('active')
    // 当前指向谁，谁添加类
    this.classList.add('active')
    // 下面的五个产品内容, 隐藏第一个盒子的内容
    document.querySelector('.tab-content .active').classList.remove('active')
    // 对应序号的那个item，添加类,显示盒子
    document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
  })
}

综合案例：全选文本框

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消。

分析：

① 全选复选框点击，可以得到当前按钮的 checked

② 把下面所有的小复选框状态checked，改和全选复选框一致

③ 遍历下面的所有的checkbox，添加点击事件

④ 检查小复选框选中的个数，是不是等于小复选框总的个数

⑤ 把结果给全选按钮

⑥ 利用csS 复选框选择器 input:checked

原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/115.html

霍欣标的头像霍欣标
0
上一篇 2024-08-02 08:27
下一篇 2024-08-09 08:51

相关推荐

联系方式

博主人懒，应管局要求暂不开启站内私信和评论功能，如需帮助请发邮件。

邮箱账号：1969600480@qq.com

分享本页
返回顶部