学习目标: 掌握事件绑定处理和事件对象,完成常见网页交互
目录
1 事件监听(绑定)
1.1 事件监听
目标:能够给 DOM元素添加事件监听
什么是事件?
- 事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮
什么是事件监听?
- 就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事件 比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等
- 语法:
- 事件监听三要素:
- 事件源: 那个dom元素被事件触发了,要获取dom元素( 用户/浏览器采取的动作 )
- 'click' 单击
- 'dblclick' 双击
- 事件类型: 用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等
- 事件处理函数: 要做什么事
如:
注意: 1. 事件类型要加引号 2. 函数是点击之后再去执行,每次 点击都会执行一次
案例 京东点击关闭顶部广告
需求:点击关闭之后,顶部关闭
分析:
①:点击的是关闭按钮
②:关闭的是父盒子
核心:利用样式的显示和隐藏完成,
display:none 隐藏元素 display:block 显示元素 (display 处理的元素不占有位置)
1.2 拓展阅读-事件监听版本
- DOM L0
事件源.on事件 = function() { }
- DOM L2
事件源.addEventListener(事件, 事件处理函数)
- 区别:
on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐使用
发展史:
DOM L0 :是 DOM 的发展的第一个版本; L:level
DOM L1:DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2:使用addEventListener注册事件
DOM L3: DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型
2 事件类型
学事件类型就是学触发事件.
案例 轮播图点击切换
需求:当点击左右的按钮,可以切换轮播图
分析:
①:右侧按钮点击,变量++,如果大于等于8,则复原0
②:左侧按钮点击,变量--,如果小于0,则复原最后一张
③:鼠标经过暂停定时器
④:鼠标离开开启定时器
案例 小米搜索框案例
需求:当表单得到焦点,显示下拉菜单,失去焦点隐藏下来菜单
分析:
①:开始下拉菜单要进行隐藏
②:表单获得焦点 focus,则显示下拉菜单,并且文本框变色(添加类)
③:表单失去焦点,反向操作
案例 同意协议
案例3 评论字数统计
需求:用户输入文字,可以计算用户输入的字数
分析:
①:判断用户输入事件 input
②:不断取得文本框里面的字符长度, 文本域.value.length
③:把获得数字给下面文本框
案例4 仿京东显示隐藏密码
3 事件对象
3.1 获取事件对象
目标:能说出什么是事件对象
事件对象是什么
- 也是个对象,事件触发时产生的对象
- 例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
使用场景
- 可以判断用户按下哪个键,比如按下回车键可以发布新闻
- 可以判断鼠标点击了哪个元素,从而做相应的操作
语法:如何获取
3.2 事件对象常用属性
目标:能够使用常见事件对象属性
部分常用属性:
- type 获取当前的事件类型
console.log (e.type)
- pageX/pageY 获取光标相对于文档(全部内容)左上角的位置
- clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
- key 用户按下的键盘键的值
- (现在不提倡使用keyCode→按键编码,但是无法处理用户自定义按键)
案例1 评论回车发布
需求:按下回车键盘,可以发布信息
分析:
①:用到按下键盘事件 keydown 或者 keyup 都可以
②:如果用户按下的是回车键盘,则发布信息
③:让留言信息模块显示,把拿到的数据渲染到对应标签内部
4 环境对象
目标:能够分析判断函数运行在不同环境中 this 所指代的对象
环境对象:指的是函数内部特殊的变量 this ,它代表着当前函数运行时所处的环境
作用:弄清楚this的指向,可以让我们代码更简洁
- 函数的调用方式不同,this 指代的对象也不同
- 【谁调用, this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数,其实相当于是 window.函数,所以 this 指代 window
当前学习 事件处理函数里面的this,指向当前事件源
如多个元素,不能直接给多元素伪数组加,可以遍历数组
5 回调函数
目标:能够说出什么是回调函数
回顾-函数分类:
把当做参数的函数称为回调函数,把别的函数当参数的函数为高阶函数
简单理解: 当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
常见的使用场景:
- 回调函数本质还是函数,只不过把它当成参数使用
- 使用匿名函数做为回调函数比较常见
综合案例
全选文本框案例
注: 查看属性时.checked / css中用属性伪类 :checked
// 获取元素
const checkAll = document.querySelector('#checkAll');
const cks = document.querySelectorAll('.ck');
// 大的选中→小的全选
checkAll.addEventListener('click', function () {
const flag = checkAll.checked;
// 直接写法
for (let i = 0; i < cks.length; i++) {
cks[i].checked = flag //直接用大按钮的flag值,省去分类
}
// if写法
// if (flag) {
// for (let i = 0; i < cks.length; i++) {
// cks[i].checked = true
// }
// }
// else {
// for (let i = 0; i < cks.length; i++) {
// cks[i].checked = false
// }
// }
})
// 小的全选,大的选中
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
const len1 = cks.length;
// :checked 伪类选择器
const len2 = document.querySelectorAll('.ck:checked').length
// 直接写 (len1 === len2)输出的已经是布尔值,直接用就可以
checkAll.checked = (len1 === len2)
// if写法
// if (len1 === len2) {
// checkAll.checked = true
// }
// else {
// checkAll.checked = false
// }
})
}