jQuery的事件处理动画

事件处理

事件绑定的快捷方式

缺点：绑定的事件无法取消

$("button:eq(0)").dblclick(function(){ alert(123) });

使用on进行事件绑定

①使用on进行单事件绑定

$("button:eq(0)").on("click",function(){       alert(123) })

②使用on同时给多个事件绑定同一函数

$("button:eq(0)").on("click dblclick mouseover",function(){ console.log(123) })

③使用on同时给多个事件分别绑定不同的函数

$("button:eq(0)").on({
　　　　"click":function(){ console.log(click) }
　　　　"mouseover":function(){ console.log(mouseover) } });

④使用on给回调函数传参，要求是对象格式，传递的函数可以用e.data取到

$("button:eq(0)").on("click", {"name":"kk","age":14},function(e){
    console.log(e)
    console.log(e.data)
    console.log(e.data.name)
     })

使用on进行事件委派

事件委派将原本绑定在DOM节点上的事件，改为绑定在其父节点甚至根节点上，然后委派给当前节点执行

    $("p").on("click", function(){})
                    ↓
    $(document).on("click", "p",function(){ })

事件委派的作用

1.将事件直接绑定在根节点上，可以减少事件绑定次数，更加节省资源

2.使用事件委派绑定的事件，当页面新增同类型标签时，新的标签页可以获得绑定的已有事件

使用off进行事件解绑

$(document).off("click", function(){alert(123) });
function func(){alert(12) }
$("button:eq(0)").on("click",func);
 
$("button:eq(0)").off("click",func);//只清除了绑定func函数的click事件
$("button:eq(0)").off("click");//清除所有的click事件
 
$("button:eq(0)").off("click dblclick");//同时清除多个事件
$(document).off("click","p");//清除事件委派
 
$("p").off( );//清除绑定的所有事件
 
one  绑定的事件只能出现一次
$("button:eq(0)").one("click", function(){ alert("一次") });

自动触发事件

trigger 自动触发某个节点绑定的事件

接收两个参数

　　①需要触发的事件类型

　　②数组格式传递给事件回调函数的参数

注意事件回调函数的第一个参数，必须是事件对象，因此我们传递的参数从第二个开始接收

　　　　　　传递的参数可以使用arguments进行读取

triggerHandler用法与trigger相同

triggerHandler 与 trigger的区别

①triggerHandler 不能触发HTML事件例如from表单中的submit事件 trigger 可以触发所有事件

②triggerHandler只能触发所有匹配元素中的第一个元素的事件 trigger 将触发所有匹配元素的事件

③triggerHandler的返回值是事件回调函数的返回值如果事件回调函数没有返回值，则返回undefined

trigger 的返回值永远是调用事件的DOM对象，符合JQuery的可链式语法

$("button:eq(0)").trigger("click",function(e,a,b,c){
　　console.log(e)
　　console.log(a)
　　console.log(b)
　　console.log(c)
　　console.log(arguments[2])
})
 
           setTimeout(function(){
　　　　　　　　$("button:eq(0)").trigger("click",[1,2,3]).text("1")
　　　　　　　　$("button:eq(0)").triggerHandler("click",[1,2,3])
 
　　　　　　　　$("form:eq(0)").trigger("submit")
　　　　　　　　$("form:eq(0)").triggerHandler("submit")
},3000)

hover 接受两个函数分别表示mouseover（）mouseout（）两个事件

如果只写一个函数表示mouseover（）

$("p:eq(0)").hover(function(){
$(this).css("background-color","beige")
},function(){
$(this).css("background-color","red")
});

toggle

①不传参数表示当前元素为显示状态则隐藏当前元素为隐藏状态则显示

②传入一个动画执行效果 "fast " "slow" "ease"

③传入一个函数表示隐藏或显示动画完成后执行的回调函数

④接受一个Boolean类型的参数如果传入的是true则显示当前元素如果传入的是false则隐藏当前元素

$("button:eq(0)").on("click",function(){

$("p:eq(0)").toggle()
 
$("p:eq(0)").toggle("fast")
 
$("p:eq(0)").toggle("fast",function(){   
　　　　　　 alert(123) 
})

动画

show 让隐藏的元素显示同时修改宽度高度透明度

不传参,将会直接显示而不进行动画参数传入时间毫秒,或者表示速度的字符串("slow","normal", or "fast")则将在指定时间内完成动画

参数也可以传入回调函数,表示动画完成后执行的回调

hide 让显示的元素隐藏效果与show相反

$("#div1").show(3000,function(){
alert(123)
});
$("#div1").hide(3000,function(){
alert(123)
});

slideDown 让隐藏的元素显示修改height属性

slideUp 让显示的元素隐藏修改height属性

slideToggle 让隐藏的元素显示让显示的元素隐藏

$("#div1").slideDown(3000,function(  )  {   alert(123)      });
$("#div1").slideToggle(3000,function(){    alert(123) });

.fadeIn 让隐藏的元素显示修改透明度opacity属性

.fadeOut 让显示的元素隐藏修改透明度opacity属性

.fadeTo 让隐藏的元素显示让显示的元素隐藏第二个参数表示动画最终的透明度

$("#div1").fadeIn(3000,function(){ alert(123)  });
$("#div1").fadeOut(3000,function(){    alert(123) });
$("#div1").fadeToggle(3000,function(){
$("#div1").fadeToggle(3000,function(){
alert(123)
});
$("#div1").fadeTo(3000,function(){ alert(123) });

animate 自定义动画接收四个参数

①动画完成后最终状态的css键值对集合注意 css的样式要求使用驼峰式命名法

②动画完成的时间传入时间毫秒,或者表示速度的字符串("slow","normal", or "fast")

③动画完成的效果可选值有"linear" 和 "swing"

④动画完成时的回调函数

$("#div1").animate({width:"0px",opacity:0},3000,"linear",function(){ alert(123) });

stop 停止当前节点的所有动画,后续动画将不再执行,动画回调将不再调用

finish 直接结束当前节点的所有动画,动画直接进入最后状态,直接调用动画回调

delay 动画延时表示延时多少毫秒后再执行动画

$("button:eq(0)").on("click",function(){
$("#div1").stop();
$("#div1").finish(); })
        $("#div1").animate({
width:"0px",
opacity:0
   },3000,"linear").delay(3000).animate({
    fontSize:"48px"
    },3000,"linear"))

jQuery的事件处理 动画

猜你喜欢

jQuery的事件处理动画