网站

jQuery trigger 在元素上触发指定类型的事件

分类 :jquery  js     2017-03-21 人气:0 0条评论

trigger()函数用于在每个匹配元素上触发指定类型的事件。
此外,你还可以在触发事件时为事件处理函数传入额外的参数。
使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。
以表单元素<form>为例,使用trigger("submit")可以触发该表单绑定的submit事件,也会执行表单submit事件的默认行为——表单提交操作。

实例

触发 input 元素的 select 事件:
$("button").click(function(){
  $("input").trigger("select");
});

第二个实例

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>
下面的所有代码都是对上面的内容进行操作
var $log = $("#log");

function handler( event, arg1, arg2 ){
    var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件,额外的函数参数为:' + arg1 + ', ' + arg2;
    $log.append( html );
}

var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );

// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );


// 触发所有button的click事件
$buttons.trigger("click"); 
/*(追加文本)
触发元素#btn1的[click]事件,额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件,额外的函数参数为:undefined, undefined
*/


$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件,额外的函数参数为:CodePlayer, undefined
*/

// arg1 = "张三", arg2 = 20
$("a").trigger("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件,额外的函数参数为:张三, 20
*/


$("a").trigger("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件,额外的函数参数为:[object Object], undefined
*/
trigger()函数还可以根据传入事件处理函数的Event对象,来触发对应的事件。
var $btn1 = $("#btn1");

// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click", function(event){
    alert("click1");    
});

// 为btn1元素的click事件绑定事件处理函数
// 如果传入了一个有效的额外参数,则再次触发click
$btn1.bind( "click", function(event, arg1){
    alert("click2");
    if(arg1)
        $(this).trigger( event );
});

// $btn1.trigger( "click" ); // 调用一次click1、调用一次click2

$btn1.trigger( "click", true ); // 调用两次click1、调用两次click2
此外,trigger()函数还可以只触发包含指定定命名空间的事件(1.4.3+才支持命名空间)
function A( event ){
    alert( 'A' );
}
function B( event ){
    alert( 'B' );
}
function C( event ){
    alert( 'C' );
}

var $btn1 = $("#btn1");

// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );


// 触发btn1的click事件,不限定命名空间
$btn1.trigger("click"); // 触发A、B、C

// 触发btn1的包含命名空间foo的click事件
$btn1.trigger("click.foo"); // 触发A、B

// 触发btn1的包含命名空间test的click事件
$btn1.trigger("click.test"); // 触发B、C

// 触发btn1的同时包含命名空间foo和test的click事件
$btn1.trigger("click.foo.test"); // 触发B


评论

大侠名号:   验证暗号: 点击我更换图片

继续阅读