文章目录
一、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 代码完全分离;
缺点:不能传递参数;一个事件只能绑定一个函数;(两个缺点都可以用匿名内部函数解决)