webAPI第二天-Dom事件基础

Dom事件基础

1.1 事件监听

目标：能够给 DOM元素添加事件监听
 什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
 什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

1.2 事件监听版本

 DOM L0
事件源.on事件 = function() { }
 DOM L2
事件源.addEventListener(事件， 事件处理函数)
 区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

发展史：
 DOM L0 ：是 DOM 的发展的第一个版本； L：level
 DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
 DOM L2：使用addEventListener注册事件
 DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

事件类型

鼠标事件：click(点击事件),mouseenter(鼠标经过),mouseleave（鼠标离开）
焦点事件：focus(获得焦点)，blur(失去焦点)
键盘事件：keydown(键盘按下)，keyup(键盘抬起触发)
文本事件：input（用户输入事件），change(改变事件)

获取事件对象

目标：能说出什么是事件对象
 事件对象是什么
 也是个对象，这个对象里有事件触发时的相关信息
 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
 使用场景
 可以判断用户按下哪个键，比如按下回车键可以发布新闻
 可以判断鼠标点击了哪个元素，从而做相应的操作

事件对象常用属性

目标：能够使用常见事件对象属性

部分常用属性
 type
 获取当前的事件类型
 clientX/clientY
 获取光标相对于浏览器可见窗口左上角的位置
 offsetX/offsetY
 获取光标相对于当前DOM元素左上角的位置
 key
 用户按下的键盘键的值
 现在不提倡使用keyCode

环境对象

目标：能够分析判断函数运行在不同环境中 this 所指代的对象
环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
 函数的调用方式不同，this 指代的对象也不同
 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

回调函数

目标：能够说出什么是回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
 常见的使用场景：

回调函数
 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
 回调函数本质还是函数，只不过把它当成参数使用
 使用匿名函数做为回调函数比较常见