什么是事件?

在编程时系统发生过的动作或者发生的事情 比如在网页上单击一个按钮

什么是事件监听?

让程序检测是否有事件产生 一旦有事件触发 就立即调用一个函数做出响应

(也称为绑定事件或注册事件)比如鼠标经过显示下拉菜单 点击播放轮播图

基本语法:元素对象.addEventListener(‘事件类型’,要执行的函数)

事件源:哪个DOM元素被事件触发了 要获取DOM元素

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

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

简单案例:

1.点击按钮 弹出一个对话框

2.点击X键 删除广告

事件类型

• 鼠标事件 鼠标触发
• click:鼠标点击
• mouseenter:鼠标经过
• mouseleave:鼠标离开
• 焦点事件 表单获得光标
• focus:获得焦点
• blur:失去焦点
• 键盘事件 键盘触发
• keydown:键盘按下触发
• keyup:键盘抬起触发
• 文本事件 表单输入触发
• input:用户输入事件

事件对象event以及常用属性

什么是事件对象?

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

使用场景:可以判断用户输入哪个键 比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素 从而做相应的操作

如何获取?

事件绑定的回调函数的第一个参数就是事件对象 我们习惯给他命名为e,ev,event……

部分常用属性

例:

环境对象

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

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

谁调用,this指向谁!!!(粗略规则)

这些就是WebAPI事件的基础内容 具体应用还需要一些具体案例的学习 后面我会整理关于各个事件类型的具体案例 (小米搜索框,评论回车发布,轮播图,tab栏切换,随机点名案例……)

其中 轮播图案例是综合性最强 并且在以后的项目中实用性和使用频度最高的案例 需要重点学习掌握

下期见,See you~