自定义事件,指的是用户自己定义的事件。在jQuery中,我们可以使用on()方法来自定义一个事件,然后使用trigger()方法来触发自定义事件。

举例:

<!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>

浏览器预览效果如图所示。

分析:

从这个例子我们可以知道,实现自定义事件需要以下2步。

  • (1)on()方法定义一个事件。
  • (2)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>

浏览器预览效果如图所示。

分析:

$("#btn").on("click" ,function(){ alert("欢迎来到绿叶学习网!"); }).trigger("click");

上面这段代码其实可以等价于:

$("#btn").on("click" ,function(){ alert("欢迎来到绿叶学习网!"); }).click();

在这个例子中,我们使用trigger("click")自动触发鼠标点击事件。在实际开发中,自动触发事件非常有用,例如图片轮播效果、模拟文件上传等功能都会用到,所以大家要重点掌握。