事件监听
事件监听也称为: 事件注册、事件绑定
- 事件监听方法 元素.addEventListener(‘事件’，匿名函数)
- 事件类型
- 鼠标事件 click 鼠标点击；mouseenter 鼠标进入 ；mouseleave 鼠标离开
- 焦点事件 focus 获得焦点 ； blur 失去焦点
- 键盘事件 keydown 键盘按下 ； keyup 键盘抬起
- 文本事件 input 当表单value被修改时触发
- 事件对象 e.key 判断用户按下哪个键
- 环境对象 this 谁调用指向谁
语法：元素对象.addEventListener('事件类型', 事件处理函数) 时间监听三要素
-
事件源(哪个元素对象被触发了) -> 事件监听是将事件处理函数注册到元素对象身上
-
事件类型 (什么情况下触发，点击还是鼠标经过等)
-
事件处理函数（要做什么事情，是弹出警告框，还是修改元素值，还是修改css属性
-
注意： 1.事件类型要加引号，小写
2.函数是事件触发之后再去执行，每次点击都会执行一次
注意：我一直以为回调函数就是匿名函数 其实是两个完全不同的概念
- 回调函数是：指定为参数并在特定条件下调用的函数，可以是匿名的，也可以是有名的。
- 匿名函数是:没有名字的函数，可以作为回调函数使用，也可以用于其他场景，如立即执行表达式（IIFE）、函数表达式等。
事件对象
- 回调函数的第一个参数就是事件对象,一般命名为e
- 事件对象存了事件源的相关信息，事件触发时显示事件源的相关信息，包含属性和方法，可以通过 事件对象.属性打印很多信息
环境对象 this
- this是函数内部使用的一种指定方式
- 谁调用就指向谁的对象 如果函数不是对象形式就是普通函数的情况下指定的是window
排他思想
- 是一种思路，目的是突出显示某个元素
- 使用方法：
- 向所有需要点击的注册事件
- 循环遍历所有事件
- 先将其他元素的css样式移除掉
- document.querySelectorAll返回的也是nodelist伪数组有长度需要遍历
- this 和e.tager 效果一样都是指向这个函数所在的DOM元素，e的功能强大一些，可以e.出很多属性如：e.type 可以指定事件源
