JavaWeb——JS事件

---

一、JS 事件简述

事件，例如：点击、表单提交等；
通过 JS 事件，完成页面的指定特效；

二、JS事件驱动机制

JS 事件驱动机制：

• 事件源；
  专门产生事件的组件；
• 事件；
  由事件源所产生的动作或者事情；
• 监听器；
  专门处理 事件源 所产生的事件；
• 注册/绑定监听器；
  让监听器时刻监听事件源是否有指定事件发生，如果事件源产生指定事件，则调用监听器处理；

三、常见的 JS 事件

1. 点击事件（onclick）

• 点击事件：由鼠标或热键点击元素组件时触发；
  

2. 焦点事件

• 获取焦点事件（onfocus）
  焦点：即整个界面的注意力；一个页面只有一个焦点
  

• 失去焦点事件（onblur）
  

3. 域内容改变事件（onchange）

• 元素组件的值发生改变时触发；
  

4. 加载完毕事件（onload）

• 元素组件加载完毕时触发；
  

5. 表单提交事件（onsubmit）

• 表单的提交按钮被点击时触发；
• 主要用于表单的校验;
• 该事件也能够控制表单的提交；该事件需要返回 boolean 类型的值来执行 提交/阻止 表单数据的操作；
  true，表示允许表单提交；false，表示组织表单提交；
  

6. 键位弹起事件（onkeyup）

• 在组件中输入某些内容时，键盘键位弹起时触发该事件；
  

7. 常用鼠标事件

• 鼠标移入事件（onmouseover）
  鼠标移入某个元素组件时触发；
  
• 鼠标移出事件（onmouseout）
  

四、JS 事件绑定方式

1. 元素事件句柄绑定

• 将事件以元素属性的方式写到标签内部，进而绑定对应函数；
  
  
• 绑定多个事件（绑定顺序即为执行顺序）
  
• 事件句柄绑定方式优缺点：
  优点：开发快捷；传参方便；可以绑定多个函数；
  缺点：JS 和 HTML 代码高度柔和在一起，不利于多部门的项目开发维护；

2. DOM 绑定方式（目前最常用的一种方式）

• DOM 绑定方式优缺点：
  优点：使得 HTML 代码和 JS 代码完全分离；
  缺点：不能传递参数；一个事件只能绑定一个函数；（两个缺点都可以用匿名内部函数解决）