trigger(eventType,param),自动触发系统事件或自定义事件;
eventType:要触发的事件类型;
param:传递的参数,可传一个或多个参数,多参数要用数组或对象表示。
案例一:
eg:一个经常看到的小功能,打开一张网页,一般会看到有广告层弹出,点击它可以关闭,不点击它倒计时结束会自动关闭:
我们简单实现下:倒计时5秒之后,div消失,或倒计时期间点击div,div消失
<div class="box"></div> //此div当做广告层
<input type="text" value="5">//此输入框做倒计时用
<script>
var num = 5;//倒计时5秒
var timer = setInterval(function(){
num--;
$("input").val(num);
if( num == 0 ){//num等于0时清除定时器,触发点击事件
clearInterval(timer);
$(".box").trigger("click");
}
},1000);
//点击div时,div消失,定时器清除
$(".box").on("click",function(){
$(this).css({display:"none"});
clearInterval(timer);
$("input").val(0);
})
</script>
案例二:参数传递--------1秒之后,触发点击事件,第一个参数是事件对象,第二个参数才是自定义的参数。
<div class="box"></div>
<script>
setTimeout(function(){
$(".box").trigger("click",1);
},1000)
$(".box").on("click",function(e,a){
console.log(e)
console.log(a)
})
</script>
案例三:多个参数传递--------1秒之后,触发点击事件
<div class="box"></div>
<script>
setTimeout(function(){
$(".box").trigger("click",[1,2,3,{name:"lv"}]);
},1000)
$(".box").on("click",function(e,param1,param2,param3,param4){
console.log(e)
console.log(param1)
console.log(param2)
console.log(param3)
console.log(param4)
})
</script>
打印结果:
在es6中,利用扩展运算符,可以把所有参数都拿到:
<div class="box"></div>
<script>
setTimeout(function(){
$(".box").trigger("click",[1,2,3,{name:"lv"}]);
},1000)
$(".box").on("click",function(e,...param){
console.log(e)
console.log(param)
})
</script>
打印结果: