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({"0px",opacity:0},3000,"linear",function(){ alert(123) });

 

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

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

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

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