JS事件

通常鼠标或热键的动作我们称之为事件（Event）
通过JS事件，我们可以完成页面的指定特效

1、JS事件驱动机制 页面上的特效，我们可以理解在JS事件驱动机制下进行 JS事件驱动机制： 事件源 事件 监听器 注册/绑定监听器

事件源：专门产生事件的组件
事件：由事件源所产生的动作或者事件
监听器：专门处理事件源所产生的事件
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器
2、常见的JS事件
（1）点击事件（onclick）
点击事件：由鼠标或热键点击元素点击元素组件时触发
示例：

（2）焦点事件（onblur、onfoucs） ①获取焦点事件（onfocus） 焦点：即这个页面的注意力 默认一个正常页面最多仅有一个焦点 例如：一条文本框中闪烁的小竖线 通常焦点也能反映用户目前的关注点，或者正在操作的组件 获得焦点事件：当元素组件获取焦点时触发 示例： ②失去焦点事件（onblur） 失去焦点事件：元素组件失去焦点时触发 示例： (3)域内容改变事件（onchange） 域内容改变事件：元素组件的值发生改变时触发 示例： 北京 上海 深圳 (4)加载完毕事件（onload） 加载完毕事件：元素组件加载完毕时触发 示例： (5)表单提交事件（onsubmit） 表单提交事件：表单的提交按钮被点击时触发 注意：该事件需要返回boolean类型的值来执行 提交/阻止表单数据的操作 事件得到true，提交表单数据 事件得到false，阻止表单数据提交 示例1：

示例2：

(6)键位弹起事件（onkeyup） 键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件 示例： （7）鼠标事件 ①鼠标移入事件（onmouseover） 鼠标移入事件：鼠标移入某个元素组件时触发 示例： ②鼠标移出事件（onmouseout） 3、就是事件的两种绑定方式 （1）元素事件句柄绑定 将事件以元素属性的方式写到标签内部，进而绑定对应函数 【为事件绑定一个无参函数】 【为事件绑定一个有参函数】 【为事件绑定一个有参函数-this】 【为事件绑定多个函数】 示例：


事件句柄绑定方式 优点： ①开发快捷 ②传参方便 ③可以绑定多个函数 缺点：JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护 （2）DOM绑定方式 使用DOM的属性方式绑定事件