自定义事件 - jQuery | 绿叶学习网

自定义事件，指的是用户自己定义的事件。在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")自动触发鼠标点击事件。在实际开发中，自动触发事件非常有用，例如图片轮播效果、模拟文件上传等功能都会用到，所以大家要重点掌握。