【博学谷学习记录】超强总结，用心分享前端|事件

目录

事件监听

事件监听版本

事件类型

事件对象

获取事件对象

环境对象

事件监听

事件是在编程时系统内发生的动作或者发生的事情，比如：用户在网页上点击一个按钮

事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也被称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，或者点击可播放轮播图...

语法：对象.addEventListener(’事件类型’，要执行的函数)

事件监听三要素：

1. 事件源：哪个DOM事件被触发了，要获取DOM元素
2. 事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseover...
3. 事件调用的函数/事件处理程序：要做什么事情

事件监听版本

DOM L0：是DOM发展的第一个版本，事件源.on = function() {}

DOM L1：是DOM于1998年10月1日成为W3C推荐标准

DOM L2：使用addEventListener注册事件

事件源.addEventListener(’事件类型’，要执行的函数)

DOM L3：DOM3级事件模块在DOM2事件的基础上重新定义了这些事情，也添加了一些新事件类型

事件类型

鼠标事件（鼠标触发）：click（鼠标点击）、mouseenter（鼠标经过、mouseleave（鼠标经过）

键盘事件（键盘触发）：keydown（键盘按下触发）、keyup（键盘弹起触发）

焦点事件（表单获得光标）：focus（获得焦点）、blur（失去焦点）、

文本事件（表单输入触发）：input（用户输入事件）

事件对象

事件对象：也是个对象，这个对象里有事件触发时的相关信息

例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景：可以判断用户按下了哪个键，例如按下回车键可以发送信息

获取事件对象

语法：元素.addEventListener（‘事件类型’，function（事件对象）{}）

在事件绑定的回调函数第一个参数就是事件对象，一般命名为event、ev、e

事件对象部分常用属性

获取当前的事件类型：type

获取光标相对于浏览器可见窗口左上角的位置：clientX/clientY

获取光标相对于当前DOM元素左上角的位置：offsetX/offsetY

用户按下的键盘键的值：key

环境对象

环境对象：指的是函数内部特殊的变量this，它代表当前函数运行时所处的环境

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

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

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