`

使用trigger()方法模拟事件

 
阅读更多
http://blog.csdn.net/lijunling2008live/article/details/7457396

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

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

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

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

$("#btn").click();



2.触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。

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

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

$("btn").trigger("myClick");



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

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

$("#btn").bind("myClick", function (event, message1, message2) { //获取数据
    $("#test").append("p" + message1 + message2 + "</p>");
});
$("#btn").trigger("myClick",["我的自定义","事件"]); //传递两个数据
$(“#btn”).trigger(“myClick”,["我的自定义","事件"]); //传递两个数据

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

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

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

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

相关推荐

    javascript触发模拟鼠标点击事件

    在Web开发中,事件处理...需要注意的是,虽然模拟事件触发在很多情况下非常有用,但过度使用或不当使用可能会导致代码难以维护,甚至出现性能问题或安全漏洞。因此,在使用这些技术时,建议开发者始终保持谨慎和适度。

    原生js实现trigger方法示例代码

    2. 创建自定义的trigger方法:通常,我们会希望在特定的操作之后模拟用户的行为,比如点击一个按钮或者触发一个事件。为了实现这一点,我们可以编写自己的trigger方法,允许我们通过编程的方式触发事件。 3. 使用...

    模拟用户单击事件demo

    - 如果我们想模拟一个点击事件,可以使用`trigger`方法:`$('element').trigger('click')`。这将执行绑定在该元素上的所有点击事件处理函数。 4. **条件判断与执行**: - 从A页面传递过来的参数可以用于决定在B...

    Trigger和TriggerHandler区别

    - **使用trigger()**:当需要模拟用户的实际操作时,比如点击、提交表单等,可以使用`trigger()`来触发相应的事件。 - **使用triggerHandler()**:当仅需要执行事件处理器中的某些逻辑,而不希望触发默认行为或事件...

    jQuery中值得注意的trigger方法浅析

    trigger方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:trigger(type,[data]) ,其中参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附件参数. 常用模拟 有时,...

    jquery阻止冒泡事件使用模拟事件

    为了解决这个问题,我们可以使用`event.stopPropagation()`方法来阻止事件继续向上级元素传播。 ```javascript $(“span”).bind(“click”, function(e){ $(“.message”).show(); e.stopPropagation(); // 这行...

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

    在本篇文章中,我们深入探讨了jQuery库中的事件触发机制,特别是通过核心方法trigger和triggerHandler来模拟用户动作的能力。这些方法允许开发者在不直接与用户交互的情况下激活元素的事件处理器。在了解这些方法...

    jquery trigger函数执行两次的解决方法

    triggerHandler可以用于模拟事件触发,而不干扰正常的页面行为。 文章提供的实例代码中,有两个按钮分别绑定了trigger和triggerHandler事件处理函数,它们都绑定到一个输入框的聚焦事件上。在触发点击事件时,可以...

    c#获得控件绑定所有的事件并执行源码

    此`ExecuteBoundControlEvents`方法尝试调用每个事件的`Raise`方法,模拟事件的触发。请注意,这可能会抛出异常,特别是在事件处理程序中存在错误的情况下。 在实际项目中,确保正确管理事件绑定是避免潜在问题的...

    jquery中trigger()无法触发hover事件的解决方法

    在jQuery中,`trigger()`方法是用来触发被选元素上的指定事件类型的。这个方法非常有用,因为它可以执行绑定到这些元素的所有处理程序和行为。然而,当尝试触发`hover`事件时,开发者可能会遇到一些问题。`hover`...

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

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

    jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

    而对于自定义事件,我们需要使用`.trigger()`方法。例如,定义了一个自定义事件`"chuaClick"`并绑定到`#middle`元素上,我们可以通过`$("#middle").trigger("chuaClick")`来触发这个事件。 `jQuery.event.trigger`...

    使用jquery模拟a标签的click事件无法实现跳转的解决

    最近在使用jquery模拟a标签的click事件,无法触发其默认行为。即click()或trigger('click')无法触发href跳转。 去卡咪官网 $('#aBtn').click();//无法跳转,不生效 $('$aBtn').trigger('click');//同样无法跳转,...

    jquery的trigger和triggerHandler的区别示例介绍

    jQuery作为流行的前端框架,为我们提供了多种操作DOM事件的便捷方法,其中trigger和triggerHandler就是用来模拟事件触发的两个方法。 首先需要了解,trigger方法用于触发元素上绑定的事件处理器,并且会执行默认...

    jquery trigger实现联动的方法

    jquery trigger是jQuery库中一个非常实用的方法,它可以用来...正确理解其异步特性和使用方法对于编写高质量的前端代码是至关重要的。同时,结合其他jQuery相关技术,可以发挥出更强大的前端交互能力,提升用户体验。

    使用trigger方式实现不用点击file类型的input弹出文件选择对话框

    这个函数通过调用ele上的事件监听函数来模拟事件的触发。 第二种方法是使用CSS将file类型的input覆盖到其他元素上,并通过设置input的样式使其完全透明。这样,当用户点击外部元素(如图片、链接或div)时,实际上...

    jquery trigger伪造a标签的click事件取代window.open方法

    简单来说,trigger()方法可以让我们模拟事件的触发,比如鼠标点击、键盘按键等。这个功能使得开发者可以在特定的时机去激活一个元素上绑定的事件处理程序,从而达到预期的操作,而无需用户真正执行这些操作。 在本...

    Javascript模拟键盘事件

    除了`KeyboardEvent`构造函数,还可以使用`Event`构造函数配合`keyCode`属性来模拟键盘事件,但这不适用于所有浏览器,因为它不包含`key`属性,可能导致在某些场景下无法正确模拟。 在实际应用中,我们可能还需要...

Global site tag (gtag.js) - Google Analytics