事件核心

一.事件监听

事件是程序在运行的时候，发生的特定动作或者特定的事情

事件监听也称为: 事件注册、事件绑定

时间监听语法:

元素对象.addEventListener('事件类型',事件处理函数)

事件监听三要素:

事件源(谁被触发了)

事件类型(什么情况下触发，点击还是鼠标经过等)

事件处理函数(要做什么事情)

回调函数

当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数（回头调用的函数）

回调函数本质还是函数，只不过把它当成参数使用 ; 使用匿名函数做为回调函数比较常见

事件监听版本

DOM L0 : 事件源.on事件类型 = function() { }

DOM L2 : 事件源.addEventListener(事件类型 , 事件处理函数)

on 方式同名事件会被覆盖，addEventListener则不会

二.事件类型

1.鼠标事件

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

2.焦点事件

focus 获得焦点

blur 失去焦点

3.键盘事件和input事件

keydown 键盘按下

keyup 键盘抬起

input 表单value 被修改时触发

三者的执行顺序： keydown → input → keyup

三.事件对象

事件对象也是个对象，这个对象里有事件触发时的相关信息，包含属性和方法

语法： 注册事件中，回调函数的第一个参数就是事件对象 一般命名为event、ev、e

想要得到用户按下了键盘哪个键可以通过 : 事件对象.key 属性

四.环境对象this

指的是函数内部特殊的 this , 它指向一个对象，并且受当前环境影响

**作用：**弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同

【谁调用， this 就是谁】 是判断 this 指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

五.排他思想

排他思想

目的 : 突出显示某个元素

比如，有多个元素，当鼠标经过时，只有当前元素会添加高亮样式，其余的元素移除样式