jQuery自定义事件之trigger事件

最新推荐文章于 2023-06-17 17:25:15 发布

qq_37036642

最新推荐文章于 2023-06-17 17:25:15 发布

阅读量775

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/qq_37036642/article/details/76673005

版权

Jquery 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了jQuery的trigger事件，包括如何模拟用户操作、触发自定义事件、传递数据以及执行默认操作。通过示例代码展示了如何使用trigger()方法触发click、自定义事件以及传递参数，并对比了trigger和triggerHandler的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时，需要通过模拟用户操作，来达到单击效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。

1.常用模拟
在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn按钮的click事件。

$(“#btn”).trigger(“click”);
这样，当页面加载完毕后，就会立刻输出想要的效果。

也可以直接用简化写法click()，来达到同样的效果：

$(“#btn”).click();
2.触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

例如为元素绑定一个“myClick”的事件，jQuery代码如下：

$(“#btn”).bind(“myClick”, function () {
$(“#test”).append(“

我的自定义事件。

“)；
})；
想要触发这个事件，可以使用下面的代码来实现：

$(“btn”).trigger(“myClick”);
3.传递数据
trigger(tpye[,datea])方法有两个参数，第一个参数是要触发的事件类型，第二个单数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

下面的是一个传递数据的例子:

$(“#btn”).bind(“myClick”, function (event, message1, message2) { //获取数据
$(“#test”).append(“p” + message1 + message2 + “

“);
});
$(“#btn”).trigger(“myClick”,[“我的自定义”,”事件”]); //传递两个数据
$(“#btn”).trigger(“myClick”,[“我的自定义”,”事件”]); //传递两个数据

4.执行默认操作
triger()方法触发事件后，会执行浏览器默认操作。例如：

$(“input”).trigger(“focus”);
以上代码不仅会触发为input元素绑定的focus事件，也会使input元素本身得到焦点（浏览器默认操作）。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法-triggerHandler()方法。

$(“input”).triggerHandler(“focus”);
该方法会触发input元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框指触发绑定的focus事件，不会得到焦点。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}

.left div {
background: #bbffaa;
}

.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>自定义事件trigger</h2>
<div class="left">
<div><span></span><span>0</span>点击次数</div>
<button>直接点击</button>
<button>通过自定义点击</button>
</div>
<script type="text/javascript">

//点击更新次数
$("button:first").click(function(event,bottonName) {
bottonName = bottonName || 'jiji';//bottonName没有值的情况下取jiji为值
update($("span:first"),$("span:last"),bottonName);
});

//通过自定义事件调用，更新次数
$("button:last").click(function() {
$("button:first").trigger('click','nini');//调用第一个函数事件传值
});

// function update(first,last,bottonName) {
// first.text(bottonName);
// var n = parseInt(last.text(), 10);
// last.text(n + 1);
// }
</script>
</body>

</html>