jQuery如何使用自动触发事件trigger

前端技术 2023/09/02 JavaScript

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

比如以下代码：

<body>
  <a href=\"#\" onclick=\"javascript:document.getElementById(\'d\').innerHTML=\'x1\'\">点击1</a>
  <a href=\"#\" onclick=\"javascript:document.getElementById(\'d\').innerHTML=\'x2\'\">点击2</a>
  <a href=\"#\" onclick=\"javascript:document.getElementById(\'d\').innerHTML=\'x3\'\">点击3</a>
  </br>
  <span id=\"d\"></span>
</body>

实现效果为\'点击1\'页面上将显示x1 ,\'点击2\'页面上显示x2 …
但需要实现首次进入页面为默认是\'点击1\'

在jQuery中，可以使用trigger()方法完成模拟操作。
例如可以使用下面的代码来触发A链接的click事件。

$(\'a\').first().trigger(\"click\");

这样 当页面加载完毕后，触发第一个A链接的click事件，页面将显示x1

触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。
例如为元素绑定一个”myEvent”的事件,jQuery代码如下：

$(\'#btn\').bind(\"myEvent\", function(){ 
  alert(\"自定义事件\");
});

想要触发这个事件,可以使用以下代码来实现：

$(\'#btn\').trigger(\"myEvent\");

传递数据

trigger(type,[data])方法有两个参数，
第1个是事件对象或者要触发的事件类型,
第2个参数是传递给事件处理函数的附加参数,以数组形式传递。通常可以通过传递一个参数给
回调函数来区别这次事件是代码触发的还是用户触发的。

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

$(\'#btn\').bind(\"myEvent\", function(event,message1,message2){ 
  alert(message1 + \",\" + message2);
});
$(\'#btn\').trigger(\"myEvent\", [\"Hello\",\"World!\"]);

以上就是jQuery自动触发事件trigger的使用方法，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/3698

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案