概念
事件： 是在编程时系统内发生的动作或者发生的事情
事件监听：检测事件的发生，一旦触发则调用执行函数作响应
事件是在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作（列如：运行一些代码）的机制
PS：其在IE中并非使用e作为参数对象，而是将事件作为window对象的event属性
语法：
//添加事件
domObj.addEventListener('触发事件',function)
//addEventListener方法传递参数方法：二次封装
domObj.addEventListener('触发事件',function(event对象固定参数，自定义参数){
//真正的执行函数
function(param,param····)
})
onEvent方法
//行内方式
<p onclick="fun()"></p>
//行内自调用函数声明作参
<p onclick="(function fun())()"
//dom对象的事件属性方式
let pDom = document.querySelector('p')
pDom.onclick = function fun(){}
事件属性版本区别
onEvent方式:
1、同一触发方式只能绑定一个事件，后事件覆盖前事件
addEventListener方式：
1、可以绑定多个同响应方式事件
事件触发时间参数：事件捕获、事件冒泡
三要素：
//事件源：被监听的dom元素
//事件：触发方式
//执行函数（调用函数）：要做什么事
事件触发方式：查表！！！
事件监听版本：
DOM L0 ：dom.onevent = function(){}
DOM L1：于1998年10月1日，Web3推荐
DOM L2：dom.addEventListener('event',function(){})
DOM L3：在2基础行重新定义是事件，添加新事件类型
常用事件：
鼠标事件：
//click 鼠标点击
dom.addEventListener('click',function)
//mouseenter 鼠标经过
dom.addEventListener('mouseenter',function)
//mouseleave 鼠标离开
dom.addEventListener('mouseenter',function)
焦点事件：
//focus 获得焦点
dom.addEventListener('focus',function)
//blur 失去焦点
dom.addEventListener('blur',function)
键盘触发：
//键盘按下 Keydown
//获取的是当前按下的键值
dom.addEventListener('keydown',function)
//键盘抬起 Keyup
//获取的是上一次按下的键值
dom.addEventListener('keyup',function)
1、需要焦点聚焦才可生效
2、确认键的使用：回车为13，，空格为32
3、注意keydown、input、keyup等事件的执行顺序
let keyEvent = function(e){
if(e.which == 13){
//
}
}
文本事件：
事件触发方式多：
除上面外，还有，input（内容改变触发）、change（内容改变触发同时失焦时触发，验证器）、focus、blur
文件表单元素，通过change判断事件是否触发
<input type='file'>
#### 高级函数
原理：
JavaScript中函数可以被当成值来处理，基于这个特性完成高级函数
函数表达式
函数表达式本质与普通函数无区别
let funValue function(a,b){return a+b}
//funValue()即为表达式
console.log(funValue(1,3))
普通函数的声明与调用无顺序要求，只是推荐声明再调用
函数表达式必须先声明再调用
回调函数
定义：将函数A作为参数给函数B，则称函数A
常见案例：定时器，监视器，匿名函数（箭头函数）
PS：
1、JS是单一线程的，无法并行处理
2、JS用异步函数来解决线程阻塞
3、异步函数因为处理时间不确定，所以无法返回值
4、异步函数通过回调方式return执行结果，解决无法返回值问题
环境对象（this)
定义：
函数内置变量 this ,它代表当前函数运行时所处的环境
指向问题：
很复杂，在面向对象中，this指代本身对象，是一个引用
但在JavaScript中，this随执行环境的改变而改变
//1、方法中，this表示该方法所属对象，即上级对象
//2、单独使用，指代全局对象，在浏览器中就是window，严格模式下位Global
//3、在函数中，this 表示全局对象,因为独立定义函数上级对象位window。
//4、在函数中，在严格模式下，this 是未定义的(undefined)。
//5、在事件中，this 表示接收事件的元素，即事件源
//6、类似 call() 和 apply() 方法可以将 this 引用到任何对象。
//当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法
person1.fullName.call(person2);
编程思想
排他思想
当前元素为A状态时，其他元素为B状态
实现思路
1、所有元素设B ：遍历
2、自己单独设置：通过this或者下标找到自己或者对应元素
案例
<!--使li标签变红-->
<style>
.blue{
text-color:blue
}
</style>
<body>
<li class='blue'>李彪啊</li>
<li class='blue'>李彪啊</li>
<li class='blue'>李彪啊</li>
<li class='blue'>李彪啊</li>
</body>
<script>
//获取元素
let liList = document.querySelectorAll('li')
//先清除所有样式
for(let i=0;i<liList.length;i++){
//remove类,只是单个指定去除
liList[i].classList.remove('blue')
//全部清除？
liList[i].className=''
}
//单独设置
</script>
评测反思：
1、事件可以通过用户交互来自动触发，也可以通过代码主动触发
// 不通过鼠标，自动 mouseenter 事件。其他事件也类推。
let ev = new Event("mouseenter");
btn.dispatchEvent(ev);
//on方式
dom.click()
dom.onclick()
2、事件对象拥有兼容性，但各浏览器获取事件的方式不一样
事件对象里面包含着与事件触发时的相关一切信息？
事件对象任何浏览器都支持，只是支持方式不一样？
事件只要触发就产生一个事件对象
答：触发时间时，会封装产生为一个事件对象（event object），其包括所有与事件有关的属性和方法，并作为第一个参数传递给监听函数
3、addE设置的事件不会自动触发、，可以绑定过多个同名事件。IE678存在兼容问题,
4、点语法不能完全获取和赋值元素上的所有属性，通过参数传递属性名的情况点语法无法解决
