JQuery 自己主动触发事件

Posted 2020-09-20 yfceshi

经常使用模拟

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

在JQuery中。能够使用trigger()方法完毕模拟操作。比如能够使用以下的代码来触发id为btn的button的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事件，不会得到焦点。