首页 > 编程笔记 > JavaScript笔记 > jQuery事件
jQuery on和trigger添加触发自定义事件
自定义事件,指的是用户自己定义的事件。在 jQuery 中,我们可以使用 on() 方法来自定义一个事件,然后使用 trigger() 方法来触发自定义事件。
举例:
图 1:使用 trigger() 方法触发自定义事件
从这个例子我们可以知道,实现自定义事件需要以下两步:
自定义事件并不是真正意义上的事件,小伙伴们可以把它理解为自定义函数,触发自定义事件就相当于调用自定义函数。由于自定义事件拥有事件类型的很多特性,因此自定义事件在实际开发中有着非常多的用途。
实际上,使用 trigger() 方法不仅可以触发自定义事件,还可以触发任何 jQuery 事件。
举例
图 2:使用 trigger() 方法触发 jQuery 事件
分析:
上面这段代码其实可以等价于:
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").on("delay", function(){ setTimeout(function(){ alert("欢迎来到新宝库!") },1000) }) $("#btn").click(function(){ $("#btn").trigger("delay"); }) }) </script> </head> <body> <input id="btn" type="button" value="按钮" /> </body> </html>预览效果如图 1 所示。
图 1:使用 trigger() 方法触发自定义事件
从这个例子我们可以知道,实现自定义事件需要以下两步:
- 使用 on() 方法定义一个事件;
- 使用 trigger() 方法触发自定义事件。
自定义事件并不是真正意义上的事件,小伙伴们可以把它理解为自定义函数,触发自定义事件就相当于调用自定义函数。由于自定义事件拥有事件类型的很多特性,因此自定义事件在实际开发中有着非常多的用途。
实际上,使用 trigger() 方法不仅可以触发自定义事件,还可以触发任何 jQuery 事件。
举例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").on("click" ,function(){ alert("欢迎来到新宝库!"); }).trigger("click"); }) </script> </head> <body> <input id="btn" type="button" value="按钮"> </body> </html>预览效果如图 2 所示。
图 2:使用 trigger() 方法触发 jQuery 事件
分析:
$("#btn").on("click" ,function(){ alert("欢迎来到绿叶学习网!"); }).trigger("click");
上面这段代码其实可以等价于:
$("#btn").on("click" ,function(){ alert("欢迎来到绿叶学习网!"); }).click();在这个例子中,我们使用 trigger("click") 自动触发鼠标点击事件。在实际开发中,自动触发事件非常有用,例如图片轮播效果、模拟文件上传等功能都会用到它,所以大家要重点掌握。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算