事件监听
什么是事件？
是编程是系统内发生的动作
语法：
元素对象.addEventListener('事件类型',执行函数)
三要素：
事件源：被触发要执行动作的DOM元素
事件类型：触发动作的方式：click(单机)，mouseover(鼠标经过)
调用的函数：所触发的动作
事件类型
鼠标事件：
1.click 鼠标点击
2.mouseenter(不会发生冒泡效果) mouseover(会产生冒泡效果) 鼠标经过
3.mouseleave 鼠标离开
焦点事件： 点击（获得焦点）或者点击以外的内容（失去焦点）
1.focus 获得焦点
2.blur 失去焦点
键盘事件： 按下键盘按下抬起两个动作
1.keydown 键盘按下触发
2.keyup 键盘抬起触发
文本事件：
1.input 用户输入事件
change事件：
change 内容发生变化
事件对象
获取事件对象
一般命名为event，ev,e
语法：
元素.addEventListener('click',function(e){
})
常用属性
type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：获取当前键盘按下的值
环境对象
环境对象：指的是函数内部特殊的变量this，他代表当前函数所运行的环境
作用：弄清this的指向（谁调用函数谁就是对象，直接调用函数相当于window.函数，this代指window），使代码更简洁
事件流
事件流分为两个阶段：
1.捕获
2.冒泡
事件流指的是事件执行的完整过程中的流动路径
事件捕获
概念：从DOM的根元素开始去执行对应的事件
DOM.addEventListener(事件类型,事件,是否用捕获机制) //捕获机制(true)
事件冒泡
概念：当某一元素的事件被触发其父级相同的事件也会被依次触发
阻止冒泡
使用要求：若想把某一事件限定只发生在当前元素内就要在当前的事件内加入阻止冒泡防止时间流动
语法：
事件对象.stopPropagation()
此方法不仅阻止的是事件冒泡还阻止了事件的捕获
解绑事件
//L0事件
const btn = document.querySelector('button')
btn.onclick = function() {
alert('点击')
btn.onclick = null
}
//L0解绑
// btn.onclick = null
const btn = document.querySelector('button')
// L2无法解绑匿名函数
function fn() {
alert('点击')
}
//L2事件
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn)
两种注册事件的区别：
传统的on注册（L0）
1.同一个对象，后面注册的事件会覆盖前面注册的事件（同一个动作只能注册一个）
2.直接使用null可以注销解绑
3.只执行冒泡的行为，不执行捕获
事件监听注册（L2）
1.语法：
addEnentListener(事件类型,执行函数,是否捕获)
2.同一动作不会覆盖前一个动作
3.可以通过第三参数去指定是否执行捕获和冒泡
4.匿名函数无法解绑
5.使用remove函数解绑
事件委托
优点：减少注册次数，提高性能
原理：利用冒泡，给父级注册事件，触发子级，让父级去执行事件
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<p>666</p>
</ul>
<script>
//1.获取父级ul
const ul = document.querySelector('ul')
//2.给父级设置事件
ul.addEventListener('click',function(e) {
//获取点击的相应子级tagName
if (e.target.tagName === 'LI') {
e.target.style.color= 'red'
}
})
</script>
阻止默认行为
在某些情况下我们要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转
语法：
对象名.addEventListener(触发动作,function(e){
e.preventDefault()
})
