jQuery on和trigger添加触发自定义事件
时间：03-07来源：作者：点击数：
自定义事件，指的是用户自己定义的事件。在 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>
预览效果如图 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") 自动触发鼠标点击事件。在实际开发中，自动触发事件非常有用，例如图片轮播效果、模拟文件上传等功能都会用到它，所以大家要重点掌握。
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号