Web APIs 第四天
事件对象
也是个对象，这个对象里有事件触发时的相关信息 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
<body>
<div>dx</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click',function(event){
console.log(event.type);
})
</script>
</body>
部分常见属性
type：获取当前事件类型
clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值，现在不提倡使用keyCode
案例1
需求：一张图片一直跟着鼠标移动
<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>
给body一个高度
body{
height: 100vh;
}
img{
position: fixed;
width: 100px;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<img src="./images/c827c91063eadd57ee37a91d65897a0.png" alt="">
<script>
const img = document.querySelector('img')
window.addEventListener('mousemove',function(event){
img.style.top = event.clientY + 'px'
img.style.left = event.clientX + 'px'
})
</script>
</body>
案例2
<body>
<textarea name="" id="area" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
<script>
const but = document.querySelector('button')
const text = document.querySelector('#area')
const ul = document.querySelector('ul')
function name() {
const lis = document.createElement('li')
lis.innerText = text.value
ul.appendChild(lis)
}
but.addEventListener('click', function () {
name()
})
//当敲击的按键是回车时就输出函数name（）
document.body.addEventListener('keydown',function(event){
if(event.key === 'Enter'){
name()
}
})
</script>
</body>
事件流
事件流指的是事件完整执行过程中的流动路径,捕获阶段和冒泡阶段
冒泡阶段：子到父,当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件 事件冒泡是默认存在的
捕获阶段：父到子 事件捕获需要写对应代码才能看到效果 第三个参数为true时，就为捕获阶段，如果是false，就为冒泡，默认为false
<body>
<div></div>
<script>false
const div = document.querySelector('div')
div.addEventListener('click',function(){},true)
</script>
</body>
阻止事件流动
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件就限制在当前元素内，就需要阻止事件流动
语法：
<body>
<div><span></span></div>
<script>
const span = document.querySelector('span')
span.addEventListener('click',function(event){
//事件对象event
event.stopPropagation()
},true)
</script>
</body>
鼠标经过事件
mouseover 和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)
阻止默认行为
<script>
const a = document.querySelector('a')
a.addEventListener('click',function(event){
//阻止默认行为
event.preventDefault
})
</script>
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧 优点：给父级元素加事件（可以提高性能） 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发 实现：事件对象.target 可以获得真正触发事件的元素
案例3
需求：点击录入按钮，可以增加学生信息
<!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>08-综合案例-模版</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #721c24;
}
h1 {
text-align: center;
color: #333;
margin: 20px 0;
}
table {
margin: 0 auto;
width: 800px;
border-collapse: collapse;
color: #004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,
th {
border: 1px solid #b8daff;
}
td {
padding: 10px;
color: #666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input {
width: 80px;
height: 25px;
outline: none;
border-radius: 5px;
border: 1px solid #b8daff;
padding-left: 5px;
}
.info button {
width: 60px;
height: 25px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}
</style>
</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>
<!-- <tr>
<td>1</td>
<td>这是名称</td>
<td>这是年龄</td>
<td>这是性别</td>
<td>这是工资</td>
<td>这是所在城市</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr> -->
</tbody>
</table>
<script>
let arr = []
const tbody = document.querySelector('tbody')
const but = document.querySelector('.add')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
but.addEventListener('click',function(){
let data ={
id:Date.now(),
uname:uname.value,
age:age.value,
gender:gender.value,
salary:salary.value,
city:city.value
}
arr.push(data)
name()
uname.value = ''
age.value = ''
gender.value = '男'
salary.value = ''
city.value = '北京'
})
function name() {
let html = ``
for (let index = 0; index < arr.length; index++) {
html +=`
<tr>
<td>${arr[index].id}</td>
<td>${arr[index].uname}</td>
<td>${arr[index].age}</td>
<td>${arr[index].gender}</td>
<td>${arr[index].salary}</td>
<td>${arr[index].city}</td>
<td><a href="javascript:" class="del" data-index="${index}">删除</a></td>
</tr>
`
}
tbody.innerHTML = html
}
document.body.addEventListener('click',function(event){
if(event.target.nodeName === 'A'){
//找到要删除下标
console.log(event.target.dataset.index);
arr.splice(event.target.dataset.index,1)
name()
}
})
</script>
</body>
</html>
