No.4.2

事件监听【语法：元素对象.addEventListener(‘事件类型’,要执行的函数)】

事件监听三要素：　　事件源：那个dom元素被事件触发了，要获取dom元素

　　　　　　　　　　事件类型：用什么方式触发，比如鼠标单击click，鼠标经过 mouseover 等

　　　　　　　　　　事件调用的函数：要做什么事

注意：1.事件类型要加引号　2.函数是点击之后再去执行，每次点击都会执行一次

事件监听版本

DOML0【事件源.on事件 = function() {}】

DOML2【事件源.addEventListener(事件,事件处理函数)】

区别：【on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用】

事件类型

鼠标事件：鼠标触发【click 鼠标点击　mouseenter  鼠标经过　mouseleave  鼠标离开】

焦点事件：表单获得光标【focus  获得焦点　blur  失去焦点】

键盘事件：键盘出发【Keydown  键盘按下触发　Keyup  键盘抬起触发】

文本事件：表单输入触发【input  用户输入事件】

获取事件对象

事件对象是什么：也是个对象，这个对象里有事件触发时的相关信息、例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景：可以判断用户按下哪个键，比如按下回车键可以发布新闻、可以判断鼠标点击了哪个元素，从而做相应的操作

语法：如何获取

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

事件对象的常见属性

type　获取当前的事件类型

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

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

key　用户按下的键盘键的值　现在不提倡使用keyCode

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

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

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

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

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

回调函数：如果函数A作为参数传递给函数B时，我们称函数A为回调函数

简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数