脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery使用自动触发事件trigger

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

 更新时间：2015年11月29日 10:02:37   作者：麦田  
这篇文章主要介绍了jQuery如何使用自动触发事件trigger，需要的朋友可以参考下

有时候，需要通过模拟用户操作，来达到点击的效果，例如用户进入页面后
就触发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的使用方法，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    二级联动的实现方法还真不少，实用性也很强，这里结合一个学生信息表的实例，来分享一下我的实现过程
    2011-11-11
  • jQuery+php实时获取及响应文本框输入内容的方法

    jQuery+php实时获取及响应文本框输入内容的方法

    这篇文章主要介绍了jQuery+php实时获取及响应文本框输入内容的方法,涉及jQuery响应键盘事件及ajax调用php文件针对输入内容的处理与回调相关技巧,非常简单易懂,需要的朋友可以参考下
    2016-05-05
  • 40款非常有用的 jQuery 插件推荐（系列一）

    40款非常有用的 jQuery 插件推荐（系列一）

    jQuery 是一个非常优秀的 JavaScript 框架，在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果，让网站有更好的可用性和用户体验
    2011-12-12
  • jquery实现百叶窗效果

    jquery实现百叶窗效果

    本文主要分享了jquery实现百叶窗效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • jQuery-ui中自动完成实现方法

    jQuery-ui中自动完成实现方法

    关于jQuery-ui-1.8中的自动完成控件，其匹配方式是使用正则表达式进行匹配的。
    2010-06-06
  • jQuery实现手风琴小案例

    jQuery实现手风琴小案例

    这篇文章主要为大家详细介绍了jQuery实现手风琴小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 基于jquery实现彩色投票进度条代码解析

    基于jquery实现彩色投票进度条代码解析

    这篇文章主要介绍了基于jquery实现彩色投票进度条代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • jQuery中nextUntil()方法用法实例

    jQuery中nextUntil()方法用法实例

    这篇文章主要介绍了jQuery中nextUntil()方法用法,实例分析了nextUntil()方法的功能、定义及匹配同辈元素的技巧与注意事项,需要的朋友可以参考下
    2015-01-01
  • jQuery构造函数init参数分析续

    jQuery构造函数init参数分析续

    其实楼主的F和jQuery.fn.init是相等的; 实现功能是和jq一样的, 只是jq的把构造函数放进原型;如果非要说原因,个人理解jq这样写整体结构清晰,先是入口构造函数,紧跟着是原型部分(原型里面init是初始化),但是不好理解;乍一看确实挺绕, 我也是看了好久才明白怎么回事
    2015-05-05
  • JQuery中层次选择器用法实例详解

    JQuery中层次选择器用法实例详解

    这篇文章主要介绍了JQuery中层次选择器用法,以实例形式较为详细的分析了jQuery中层次选择器的各种常见使用技巧,并备有较为详细的注释说明,需要的朋友可以参考下
    2015-05-05

最新评论