# 1、普通事件
普通事件,比如有click、mouseenter、change、blur…等
语法:click([data], fn);
1.1、事件方法没有参数,可用于传递事件
![](https://img.kancloud.cn/7c/1b/7c1beead9c35245e3644a5941a129971_903x391.png)
1.2、给事件传入的数据,可通过事件对象的data属性获取
![](https://img.kancloud.cn/aa/bb/aabbb7ead52b2cd2de748ee2a2498233_967x98.png)
# 2、on事件
2.1、给未来的元素绑定事件(事件委托)
语法:$(父级元素).on(事件类型, 子元素, 处理函数);
![](https://img.kancloud.cn/ed/50/ed50884f902f0ee1f5b5618b7282245d_823x507.png)
给未来的元素绑定事件(事件委托)常用于给Ajax返回的数据添加事件。
PS:1.7版本及之后,可使用on来完成事件委托;1.7之前的版本可以使用live或bind来完成事件委托
2.2、给一个元素绑定多个同类型的事件
不同on也可以完成这个功能:
![](https://img.kancloud.cn/58/32/5832939dbf3c4394db21ff3ea22a2862_566x301.png)
不用on,也可以为一个元素绑定多个同类型的事件:
![](https://img.kancloud.cn/54/0f/540fa34b0a9a090c6e28e9ddbdba2836_502x184.png)
用on给一个元素绑定两个不同的事件:
![](https://img.kancloud.cn/f3/cf/f3cf8e6fe0012f2d065c384a2729c419_711x158.png)
![](https://img.kancloud.cn/48/4e/484e592d267c0340dde65ad789aa700e_528x210.png)
用on为一个元素绑定多个同类型的事件:
![](https://img.kancloud.cn/7d/6a/7d6a78c542cc040d81f45772064903bc_739x329.png)
# 3、off事件
用于取消元素的某个事件。
实际开发中,这个东西很有用,有些时候是需要先取消掉一个元素的所有事件,然后在绑定你要绑定的事件,可以解决一些bug。
![](https://img.kancloud.cn/7f/1a/7f1a25c31756bb42d1748db1fba9e16a_749x346.png)
PS:off和on一组的,都是3.0版本后存在,3.0版本之前,可以使用unbind事件来完成事件的取消工作。
# 4、one事件
给元素绑定的事件,只执行一次。
![](https://img.kancloud.cn/b2/69/b2692f4c18b9f9186f387600bdaf457f_688x485.png)
- 第一天
- 一、学习目标
- 二、关于JavaScript
- 三、JS语法基础
- 四、变量
- 五、常量
- 六、运算符
- 七、数组
- 八、对象
- 九、数据类型
- 第二天
- 一、昨日复习
- 二、今日目标
- 三、数据类型转换
- 四、流程控制
- 五、函数基础
- 六、作用域
- 七、标准库(内置对象)
- 八、总结
- 第三天
- 一、昨日复习
- 二、今日目标
- 三、DOM介绍
- 四、元素(标签)节点查询操作
- 五、元素(标签)节点增删改操作
- 六、设置/获取元素的css样式
- 七、事件和事件对象
- 八、键盘keyCode对照表
- 第四天
- 一、昨日复习
- 二、今日目标
- 三、DOM之属性节点操作
- 四、DOM对象的通用属性
- 五、DOM获取元素的位置
- 六、事件绑定与移除
- 七、事件对象相关属性和方法使用
- 八、案例--可编辑的表格
- 第五天
- 一、今日目标
- 二、执行流程
- 三、定时器
- 四、闭包
- 五、案例
- 第六天
- 一、昨日回顾
- 二、今日目标
- 三、正则表达式概述
- 四、入门案例
- 五、正则语法
- 六、分组/捕获和反向引用
- 七、匹配中文(utf-8编码)
- 八、环视(断言/零宽断言/正向预测/负向预测)
- 九、正则对象的属性和方法
- 十、支持正则表达式的 String 对象的方法
- 十一、案例
- 十二、PHP中的正则表达式
- 第七天
- 一、昨日回顾
- 二、正则案例
- 三、PHP中的正则表达式
- 四、正则练习
- 五、仿淘宝评分小星星
- 六、标签页效果
- 七、横向下拉菜单
- 第八天
- 一、今日目标
- 二、面向对象编程
- 三、定义对象
- 四、对象相关操作
- 五、对象在内存中的存在形式
- 六、原型对象(关键)
- 七、定义对象进阶
- 八、函数进阶
- 第九天
- 一、昨日回顾
- 二、今日目标
- 三、Object
- 四、继承
- 五、this指向总结
- 六、案例(贪吃蛇)
- 第十天
- 一、今日目标
- 二、Ajax概述
- 三、工作原理
- 四、XMLHttpRequest对象介绍
- 五、使用Ajax的步骤
- 六、细节问题
- 七、JSON
- 八、Ajax中,服务器返回json格式的数据
- 九、案例--省市县三级联动
- 第十一天
- 一、昨日回顾
- 二、今日目标
- 三、完成省市县三级联动
- 四、优化省市县三级联动
- 五、服务器返回XML格式的数据
- 六、FormData对象
- 七、跨域请求
- 八、实现跨域请求
- 第十二天
- 一、Ajax回顾
- 二、今日目标
- 三、jQuery概述
- 四、快速入门
- 五、可编辑的表格
- 六、纵向导航菜单
- 七、横向导航菜单
- 八、标签页效果
- 第十三天
- 一、学习目标
- 二、杂项
- 三、jQuery中的事件
- 四、jQuery封装的Ajax
- 五、案例 -- 无刷新的分页
- 第十四天
- 一、昨日回顾
- 二、效果
- 三、跨域请求
- 四、文档操作
- 五、插件编写
- 六、自定义插件
- 七、第三方插件