事件对象
- 获取事件对象: 在事件处理函数中里面接受一个形参即可 按键事件常用属性
e.key
keyup
获取的是当前这一次的value
keydown
获取的value是上一次的value
注意： 不建议再使用 keyCode
e.which
键码
案例： 给发布微博案例添加按下回车发布新闻案例
- 单击事件常见属性
e.clientX/e.clientY
鼠标单击位置参照视口的坐标值
e.offsetX/e.offsetY
鼠标单击位置参照元素左上角的坐标值
e.screenX/e.screenY
鼠标单击位置参照屏幕左上角的坐标值
当前真正触发事件的元素对象
e.target
事件流
- 事件流
过程: 事件捕获 => 事件目标阶段 => 事件冒泡 整个完整的过程就是事件流
实际工作都是使用事件冒泡为主
- 事件捕获
概念: 从DOM的根元素开始去执行对应的事件 (从外到里)
捕获机制必须使用事件监听的形式注册
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
第三个参数为true:捕获阶段触发事件
false代表冒泡阶段触发事件-默认值
- 事件冒泡
概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
- 事件冒泡的必要性
如果没有冒泡.给大盒子注册点击事件, 点击的是里面的小盒子,会导致大盒子的点击无法执行
- 事件委托
自己不注册事件,将对应的事件注册给祖先元素
减少事件的注册,提高效率
e.target => 当前点击的那个元素
- 阻止事件冒泡
自己不注册事件,将对应的事件注册给祖先元素
减少事件的注册,提高效率
e.target => 当前点击的那个元素
- 阻止冒泡和默认行为
自己不注册事件,将对应的事件注册给祖先元素
减少事件的注册,提高效率
e.target => 当前点击的那个元素
事件注册的两种方式区别
- 传统on注册
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的
- 事件监听注册
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑
mouseover和 mouseenter的区别
事件委托
- 优点
减少事件的注册，只需要注册化父容器
可以为已存在和未来的元素注册事件，注册一次，现在未来通用
- 原理：
利用冒泡
使用场景：动态的渲染的元素的事件注册使用委托，动态渲染的元素的事件只能使用委托
- 案例-渲染学生信息案例
业务拆分 查询（动态渲染）操作第一个完成
静态结构
数据
现在实现方式1：遍历数据，拼接html结构，最终将结果赋值给某个容器
innerHTML
方式2：创建元素，设置内容，追加到指定的容器中
createElement
- 添加
最关键的准备你要添加的数据，我们的核心任务是收集用户信息，准备好完整的数据
stuId:
获取数组中最后一个元素对象的stuId值 +１
如果数组为空，stuId 为1001
uname:表单元素
age: 表单元素
gender: 表单元素
salary:表单元素
city: 表单元素
添加的页面效果是：在表格中多出一行新增的数据
方式1：
根据数据创建一个新行，追加到tbody中
方式2
将生成的数据对象，追加到数组中，重新渲染
追加数据到数组
将渲染过程封装为函数
调用函数
- 删除
删除一定体现到数据
删除按钮的事件绑定应该要使用委托
删除数组中的指定位置的元素
arr.splice(索引,1)
重新渲染
经验
如果一个业务需要某个值才能进行，我们一般有两种方式来处理
如果可以传递参数就传递参数
先存储再获取
存储在那里
如何取值方便来决定
存储什么
基于业务需求
如何获取
