目标：熟悉事件对象的使用，具备利用操作数组对象渲染订单系统的能力
事件对象
-
获取事件对象: 在事件处理函数中里面接受一个形参即可
-
按键事件常用属性
-
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.stopPropagation()
-
-
-
阻止冒泡和默认行为
-
e.stopPropagation()
- 阻止事件冒泡
-
e.preventDefault()
- 链接的跳转
- 表单域跳转
-
-
事件注册的两种方式区别
-
传统on注册
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
-
事件监听注册
-
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
-
后面注册的事件不会覆盖前面注册的事件(同一个事件)
-
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
-
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
-
-
-
mouseover和 mouseenter的区别
事件委托
-
优点
- 减少事件的注册，只需要注册化父容器
- 可以为已存在和未来的元素注册事件，注册一次，现在未来通用
-
原理：
- 利用冒泡
-
使用场景：动态的渲染的元素的事件注册使用委托，动态渲染的元素的事件只能使用委托
综合案例-渲染学生信息案例
-
业务拆分
-
查询（动态渲染）操作第一个完成
-
静态结构
-
数据
-
现在实现方式1：遍历数据，拼接html结构，最终将结果赋值给某个容器
- innerHTML
-
方式2：创建元素，设置内容，追加到指定的容器中
- createElement
- appendChild
-
-
添加
-
最关键的准备你要添加的数据，我们的核心任务是收集用户信息，准备好完整的数据
-
stuId:
- 获取数组中最后一个元素对象的stuId值 +１
- 如果数组为空，stuId 为1001
-
uname:表单元素
-
age: 表单元素
-
gender: 表单元素
-
salary:表单元素
-
city: 表单元素
-
-
添加的页面效果是：在表格中多出一行新增的数据
-
方式1：
- 根据数据创建一个新行，追加到tbody中
-
方式2
-
将生成的数据对象，追加到数组中，重新渲染
- 追加数据到数组
- 将渲染过程封装为函数
- 调用函数
-
-
-
-
删除
-
删除一定体现到数据
-
删除按钮的事件绑定应该要使用委托
-
删除数组中的指定位置的元素
- arr.splice(索引,1)
-
重新渲染
-
-
经验
-
如果一个业务需要某个值才能进行，我们一般有两种方式来处理
-
如果可以传递参数就传递参数
-
先存储再获取
-
存储在那里
- 如何取值方便来决定
-
存储什么
- 基于业务需求
-
如何获取
-
-
-
-
-
##小案列
静态结构
<div class="info">
姓名：<input type="text" class="uname" /> 年龄：<input type="text" class="age" />
性别:
<select name="gender" id="" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" /> 就业城市：<select name="city" id="" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</div>
<h1>信息列表</h1>
<table>
<thead>
<tr>
<th>序列号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>这是名称</td>
<td>这是年龄</td>
<td>这是性别</td>
<td>这是工资</td>
<td>这是所在城市</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr> -->
</tbody>
// 获取元素
let tbody = document.querySelector('tbody')
let add = document.querySelector('.add')
// 以后我们要的是表单元素的值--value属性
let unameEle = document.querySelector('.uname')
let ageEle = document.querySelector('.age')
let genderEle = document.querySelector('.gender')
let salaryEle = document.querySelector('.salary')
let cityEle = document.querySelector('.city')
// 1. 准备好数据后端的数据
let arr = [
{
stuId: 1001,
uname: '欧阳霸天',
age: 19,
gender: '男',
salary: '20000',
city: '上海'
},
{
stuId: 1002,
uname: '令狐霸天',
age: 29,
gender: '男',
salary: '30000',
city: '北京'
},
{
stuId: 1003,
uname: '诸葛霸天',
age: 39,
gender: '男',
salary: '2000',
city: '北京'
}
]
// 实现数据的渲染
function init() {
// 说到渲染：必须有 数据 + 静态结构 的参与，实现方式就是 遍历数据，拼接结构，替换数据，填充到指定的dom结构中
let htmlStr = ''
arr.forEach(function(item, index) {
htmlStr += `<tr>
<td>${index + 1}</td>
<td>${item.uname}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td>${item.salary}</td>
<td>${item.city}</td>
<td>
<a href="javascript:" class="del" id='${
item.stuId
}'>删除</a>
</td>
</tr>`
})
tbody.innerHTML = htmlStr
}
init()
// 实现数据的新增
// 1.准备好你需要新增的数据，添加到数据源
// 2.渲染
add.addEventListener('click', function() {
// 1.收集数据，生成一个对象
let obj = {
// 获取最后一个数据对象的stuId + 1,如果没有数据，id直接赋值为1001
stuId: arr.length > 0 ? arr[arr.length - 1].stuId + 1 : 1001,
// 获取表单元素的值，单击按钮之后再取值
uname: unameEle.value,
age: ageEle.value,
gender: genderEle.value,
salary: salaryEle.value,
city: cityEle.value
}
// 2.将生成的对象添加到数组
arr.push(obj)
// 3.渲染
init()
})
// 实现数据删除-动态渲染的元素(新增的元素，未来的元素)的事件绑定需要使用事件委托
// 事件委托：将事件绑定给父容器，让子元素来触发
tbody.addEventListener('click', function(e) {
// e.target是什么？当前用户单击的元素
// 只有单击了删除才真正进行处理
if (e.target.className == 'del') {
// 获取当前你想删除的数据的id
let id = e.target.id
console.log(id);
// 根据id找到对应的索引
for (let i = 0; i < arr.length; i++) {
// 根据id找到对应的索引
// 找到了我要删除的数据
if (id == arr[i].stuId) {
// 实现删除业务
// 删除数据
arr.splice(i, 1)
// // // 渲染
init()
}
}
}
})
</script>
