JQuery 自动触发事件
常用模拟
有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发 click 事件,而不需要用户去主动单击。
在 JQuery 中,可以使用 trigger() 方法完成模拟操作。例如可以使用下面的代码来触发 id 为 btn 的按钮的 click 事件。
1 |
$('#btn').trigger("click"); |
这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直接简写 click(),来达到同样的效果:
触发自定义事件
trigger() 方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。例如为元素绑定一个"myClick" 的事件,JQuery 代码如下:
1 |
$('#btn').bind("myClick", function(){ |
想要触发这个事件,可以使用以下代码来实现:
1 |
$('#btn').trigger("myClick"); |
传递数据
trigger(type[,data]) 方法有两个参数,第 1 个参数是要触发的事件类型,第 2 个参数是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
下面是一个传递数据的例子。
2 |
$('#btn').bind("myClick", function |
$('#btn').click(function(){ |
$(this).trigger("myClick",["我的自定义","事件"]); |
}).trigger("myClick",["我的自定义","事件"]); |
执行默认操作
trigger() 方法触发事件后,会执行浏览器默认操作。例如:
1 |
$("input").trigger("focus"); |
以上代码不仅会触发为元素绑定的 focus 事件,也会使元素本身得到焦点(这是浏览器的默认操作)。
如果只想触发绑定的 focus 事件,而不想执行浏览器默认操作,可以使用 jQuery 中另一个类似的方法——triggerHandler() 方法。
1 |
$("input").triggerHandler("focus"); |
该方法会触发元素上绑定的特定事件,同时取消浏览器对此事件的默认操作,即文本框只触发绑定的 focus 事件,不会得到焦点。
来源: http://www.bubuko.com/infodetail-2450695.html