一、事件对象
1、获取事件对象
- 事件对象概念
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息 - 如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
2、事件对象常用属性
- 部分常用属性
- type
获取当前的事件类型 - pageX/pageY
获取光标相对于整个页面（如页面很长，划上去的也算）左上角的位置 - clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置 - offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置 - key
用户按下的键盘键的值
现在不提倡使用keyCode
- type
案例–跟随鼠标
需求：一张图片一直跟着鼠标移动
分析：
①：鼠标在页面中移动，用到 mousemove 事件
②：不断把鼠标在页面中的坐标位置给图片left和top值即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
/* 定位才能根据top、left移动 */
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="./tianshi.gif" alt="">
<script>
let img = document.querySelector('img')
document.addEventListener('mousemove', function (e) {
img.style.top = e.pageY + 'px'
img.style.left = e.pageX + 'px'
})
</script>
</body>
</html>
案例–按下回车发布微博
需求：按下回车键盘，可以发布信息
分析：
①：用到按下键盘事件 keydown 或者 keyup 都可以
②：如果用户按下的是回车键盘，则发布信息
③：按下键盘发布新闻，其实和点击发布按钮效果一致 btn.click()
//回车发布,text是输入文本框 ，btn是按钮，回车发布就让她自动点击按钮，和点击发布效果一样
text.addEventListener('keyup',function(e){
//按下回车Enter
if (e.key === 'Enter'){
// 和点击发布按钮效果一致
btn.click()
}
})
二、事件流
1、事件流与两个阶段说明
事件流指的是事件完整执行过程中的流动路径
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
2、事件捕获和事件冒泡
-
事件冒泡
- 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
- 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件(如下，点击son区域，会相继弹出“我是儿子”、“我是爸爸"、”我是爷爷“)
- 事件冒泡是默认存在的
-
事件捕获
-
从DOM的根元素开始去执行对应的事件 (从外到里)
-
事件捕获需要写对应代码才能看到效果，如下图点击son区域，会相继弹出“我是爷爷”、“我是爸爸"、”我是儿子“
-
说明：
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入 false 代表冒泡阶段触发，默认就是 false
若是用 L0 事件监听如btn.onclick = function() {}，则只有冒泡阶段，没有捕获
-
3、阻止事件流动（不想让它捕获、冒泡）
阻止事件冒泡
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止事件流动需要拿到事件对象
- 语法
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
- 鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 ( 推荐 )
阻止默认行为
比如链接点击不跳转，表单域不提交
- 语法
4、两种注册事件的区别：
-
传统on注册（L0）
btn.onclick = function() {}
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑btn.onclick = null
都是冒泡阶段执行的 -
事件监听注册（L2）
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
元素.removeEventListener('click', 函数)
匿名函数无法被解绑
三、事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
总结：
优点：给父级元素加事件（可以提高性能）
原理：事件委托其实是利用事件冒泡的特点
实现：事件对象.target 可以获得真正触发事件的元素
可以不用通过全部获取 li，再遍历添加事件监听，通过获取ul并给ul添加监听，被点击的li会冒泡到ul实现效果
四、综合案例–渲染学生信息
需求：点击录入按钮，可以增加学生信息
分析：
不管添加还是删除，都是操作的数据（数组），然后从新渲染页面
需求①：添加数据
点击录入按钮，把表单里面的值都放入数组里面
学号自动生成，是数组最后一个数据的学号+1
需求②：渲染
把数组的数据渲染到页面中，同时清空表单里面的值，下拉列表的值复原
注意，渲染之前，先清空以前渲染的内容
因为多次渲染，最好封装为函数
需求③：删除数据
为了提高性能，最好使用事件委托方式，找到点击的是链接 e.target.tagName
根据当前的删除链接，找到这条数据
然后使用 splice 来删除对应数据
重新渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/user.css">
</head>
<body>
<h1>新增学员</h1>
<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>
</tbody>
</table>
<script>
// 准备好数据后端的数据
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: '北京' },
]
//1、渲染
let tbody = document.querySelector('tbody')
let uname = document.querySelector('.uname')
let age = document.querySelector('.age')
let gender = document.querySelector('.gender')
let salary = document.querySelector('.salary')
let city = document.querySelector('.city')
function xuan() {
//先删除原来的数据,后面重新渲染数据
tbody.innerHTML=''
for (let i = 0; i < arr.length; i++) {
//① 创建节点
let tr = document.createElement('tr')
//② 节点添加内容
tr.innerHTML = `
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" id=${i}>删除</a>
</td>
`
//③ 追加节点
tbody.appendChild(tr)
}
}
xuan()
// 2、录入数据
let add = document.querySelector('.add')
add.addEventListener('click', function () {
// 获得表单里面的值 之后追加给 数组 arr 用 push方法
arr.push({
stuId: arr[arr.length-1].stuId + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
})
//重新渲染数据
xuan()
//复原所有的表单数据
uname.value = ''
age.value=''
gender.value='男'
salary.value=''
city.value='北京'
})
// 3、删除数据
tbody.addEventListener('click',function(e){
//只有点击了删除链接a ，才会执行删除操作
// 那我们怎么知道你点击了a呢？e.target.tagName
if(e.target.tagName === 'A'){
// 删除操作 删除 数组里面的数据 arr.splice(从哪里开始删，1)
// 要得到被删除a的id
arr.splice(e.target.id,1)
//重新渲染
xuan()
}
})
</script>
</body>
</html>
注意：数据量大使用事件委托监听事件的时候，这里因为不知道具体点击删除的哪一个tr，所以给他标了个号
<a href="javascript:" id=${i}>删除</a>
// 要得到被删除a的idarr.splice(e.target.id,1)
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
