一、事件对象
1.获取事件对象
1）事件对象：是个对象，这个对象里有事件触发时的相关信息
2）如何获取
-
在事件绑定的回调函数的第一个参数就是事件对象
-
一般命名为event、ev、e
2.事件对象常用属性
1）部分常用属性
① type：获取当前的事件类型
② clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
③ offsetX/offeetY：获取光标相对于当前DOM元素左上角的位置
④ key：用户按下的键盘键的值 （现在不提倡使用keyCode）
二、事件流
1.事件流与两个阶段说明
1）事件流指的是事件完整执行过程中的流动路径
2）说明：假设页面里有个div,当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
3）简单来说：捕获阶段是 从父到子 冒泡阶段是 从子到父
2.事件冒泡和事件捕获
1）事件冒泡
①概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
②简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
③事件冒泡是默认存在的
2）事件捕获
①概念：从DOM的根元素开始去执行对应的事件（从外到里
②事件捕获需要些对应代码才能看到效果
③代码：
④说明：
-
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
-
若传入false代表冒泡阶段触发，默认就是false
-
若是用L0事件监听，则只有冒泡阶段，没有捕获
3.阻止事件流动
1）因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
2）若想把事件就限制在当前元素内，就需要阻止事件流动
3）阻止事件流动需要拿到事件对象
4）语法：事件对象.stopPropagation()
5）此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
6）鼠标经过事件
① mouseover 和 mouseout 会有冒泡效果
② mouseenter 和 mouseleave 没有冒泡效果(推荐)
7）阻止默认行为
①语法：e.preventDefault()
8）两种注册事件的区别
①传统on注册（L0)
-
同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
-
直接使用null覆盖后就可以实现事件的解绑
-
都是冒泡阶段执行的
②事件监听注册（L2）
-
语法：addEventListener(事件类型, 事件处理函数, 是否使用捕获)
-
后面注册的事件不会覆盖前面注册的事件（同一个事件）
-
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
-
必须使用removeEventListener（事件类型，事件处理函数，获取捕获或冒泡阶段）
-
匿名函数无法被解绑
三、事件委托
1.事件委托是利用事件流的特征解决一些开发需求的知识技巧
2.总结：
1）优点：给父级元素加事件（可以提高性能）
2）原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
3）实现：事件对象.target 可以获得真正触发事件的元素
四、案例
1.跟随鼠标案例
<style>
body {
width: 100%;
height: 100%;
}
img {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
}
</style>
<body>
<img src="./images/1.png" alt="">
<script>
const img = document.querySelector('img')
document.addEventListener('mousemove', function(e) {
const left = e.clientX
const top = e.clientY
img.style.left = left + 'px'
img.style.top = top + 'px'
})
// document.addEventListener('mousemove', function(event) {
// console.log(event.clientX, event.clientY)
// img.style.left = event.clientX - 25 + 'px'
// img.style.top = event.clientY - 25 + 'px'
// })
</script>
</body>
2.按下回车发布案例
<body>
<textarea id="area" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
let area = document.querySelector('#area')
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.addEventListener('click', function(e) {
let li = document.createElement('li')
li.innerText = area.value;
ul.appendChild(li)
//发布后清空文本域
area.value = ''
})
area.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
btn.click()
}
})
</script>
</body>
3.学生信息案例
<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>
4.事件委托
<style>
div {
width: 400px;
height: 400px;
border: solid;
}
</style>
<body>
<div>
<ul>
<li>我是li标签</li>
<li>我是li标签</li>
<li>我是li标签</li>
<li>我是li标签</li>
<p>123</p>
</ul>
</div>
<button>新增li标签</button>
<script>
const div = document.querySelector('div')
const ul = document.querySelector('ul')
const liList = document.querySelectorAll('li')
const btn = document.querySelector('button')
btn.addEventListener('click', function() {
const newLi = document.createElement('li')
newLi.innerHTML = '我是新的li标签'
ul.appendChild(newLi)
})
ul.addEventListener('click', function(e) {
if (e.target.localName === 'li') {
e.target.style.color = 'blue'
}
})
</script>
</body>
5.
