`

JQuery 自动触发事件

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

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

1 $('#btn').trigger("click");
这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直接简写click(),来达到同样的效果:

1 $('#btn').click();
触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件,JQuery代码如下:

1 $('#btn').bind("myClick", function(){ 
2      $('#test').append("<p>我的自定义事件.</p>"); 
3 });
想要触发这个事件,可以使用以下代码来实现:

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

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

1 $(function(){ 
2    $('#btn').bind("myClick", function(event, message1, message2){ 
3                  $('#test').append( "<p>"+message1 + message2 +"</p>"); 
4     }); 
5    $('#btn').click(function(){ 
6         $(this).trigger("myClick",["我的自定义","事件"]); 
7    }).trigger("myClick",["我的自定义","事件"]); 
8 })
执行默认操作
trigger()方法触发事件后,会执行浏览器默认操作。例如:

1 $("input").trigger("focus");
以上代码不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(这是浏览器的默认操作)。

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

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

参考:http://blog.csdn.net/rrr4578/article/details/27527301
分享到:
评论

相关推荐

    JQuery自动触发事件的方法

    在现代Web开发中,使用JQuery自动触发事件是一个非常有用的技巧,可以帮助开发者模拟用户的交互行为,而无需用户手动去触发相应的事件。JQuery作为一款强大的JavaScript库,提供了多种方法来帮助开发者轻松实现这一...

    jQuery实现长按按钮触发事件的方法

    jQuery实现长按按钮触发事件的方法是移动设备和网页应用开发中的一项常见技术,主要目的是为了增强用户交互体验,尤其是在触摸屏设备上。通过长按按钮触发特定事件,开发者可以为用户提供更丰富的交互方式,比如在...

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

    jQuery中的trigger()方法是用于自动触发事件的常用函数,它允许开发者模拟用户的操作,执行与事件相关的代码。在不同的应用场景中,这可以非常有用。例如,在页面加载完成后自动触发某些事件,或者在用户与界面交互...

    读jQuery之十四 (触发事件核心方法)

    ### jQuery的触发事件方法 在上述传统方法的基础上,jQuery封装了更为简便和兼容性更好的事件触发方法。在jQuery中,.trigger和.triggerHandler是主要用来触发事件的两个方法。 - .trigger方法会触发指定事件的...

    jQuery实现自动调用和触发某个事件的方法

    在JavaScript的世界里,jQuery库极大地简化了DOM操作和事件处理。... 1. **jQuery 自动触发点击事件** ... ```javascript ... $('#button').click...希望本文的讲解能帮助你理解和应用jQuery自动调用和触发事件的方法。

    jquery 自动补全搜索框控件

    jQuery自动补全功能主要依赖于jQuery UI库中的Autocomplete组件。它监听用户在搜索框中的输入事件,当用户输入达到一定字符数量(通常是1个或以上)时,触发异步请求,向服务器发送查询请求。服务器返回匹配结果,...

    jquery自动完成输入框

    标题中的“jquery自动完成输入框”指的是使用jQuery库实现的Autocomplete功能,这是一种常见的前端UI交互设计,用于提升用户在输入框中输入信息时的效率和体验。它会在用户输入时提供匹配的建议列表,常见于搜索框、...

    jquery 自动完成功能

    本篇文章将详细讲解如何利用jQuery实现自动完成功能,这在网页表单输入中十分常见,能提升用户体验,特别是在用户需要从大量数据中选取时。 首先,自动完成功能的核心在于获取用户输入并根据输入内容实时过滤出匹配...

    基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: &lt;select&gt; 选项一...

    jquery自动补全例子

    **jQuery自动补全插件详解** 在Web开发中,用户输入常常需要得到实时的提示和建议,以提高交互体验和输入效率。这就是自动补全功能的用途,它可以在用户输入时提供相关的建议列表。jQuery库提供了多种实现自动补全...

    jQuery自动完成插件autocomplete.zip

    jQuery自动完成插件是网页开发中常用的一种工具,它能够为用户提供实时的搜索建议,提升输入体验。在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成...

    jQuery企业大事件攀爬效果

    4. **事件触发**:为了在页面加载后自动启动动画,我们可以将上述代码放入`$(document).ready()`函数中,确保在DOM加载完成后再执行。此外,还可以添加一个按钮,用户点击后触发动画,增强交互性。 5. **优化与兼容...

    jQuery自动补全筛选input代码.zip

    总之,"jQuery自动补全筛选input代码"项目涉及了jQuery库的核心功能,包括选择器、事件处理、数据操作、AJAX请求、DOM操作以及性能优化策略。通过学习和实践这样的项目,开发者可以提升在前端交互方面的技能,为用户...

    jQuery实现的回车触发按钮事件功能示例

    此外,这段代码也涉及到了一些基本的jQuery选择器和方法,如`val()`用于获取元素的值,`focus()`用于聚焦元素,以及`triggerHandler()`用于触发事件。这些是jQuery库中的核心功能,对于理解和编写更复杂的JavaScript...

    jquery自动调整提示框显示位置

    jquery自动调整提示框显示位置,触发事件,返回提示框应该显示的位置

    Jquery自动补全

    jQuery自动补全是一种常见的前端开发技术,用于提升用户体验,特别是在搜索框或输入字段中,它能够根据用户输入的内容实时提供预测建议。这个功能在许多网站和应用中都有所应用,如百度搜索、谷歌搜索等。它能够帮助...

    jquery绑定click事件传递参数

    在这个例子中,我们可以直接在`.on()`方法中列出要传递的参数,它们会在事件触发时自动传入回调函数。 关于CSS标签,虽然题目给出的标签是"css",但这个场景主要涉及的是JavaScript和jQuery的事件处理。然而,CSS在...

    jquery自动补全示例。包括后台,中文乱码解决JS

    **jQuery自动补全插件详解** jQuery 自动补全插件是一种常见的前端开发工具,它为用户在输入框中提供动态建议,提高了用户体验,尤其在处理大量数据输入时显得尤为重要。本示例将涵盖如何使用jQuery实现自动补全...

    jQuery参考手册-事件总结

    13. **event对象**: 在事件处理函数内,`event` 对象提供了关于事件的详细信息,如 `event.type` (事件类型),`event.target` (触发事件的元素),`event.preventDefault()` (阻止事件的默认行为) 和 `event....

Global site tag (gtag.js) - Google Analytics