jQuery事件监听与动画效果

事件绑定方式

jQuery绑定事件的方式很多
除了直接绑定事件外，还有四种监听器

绑定	解除	兼容	特点
bind	unbind	all	仅可监听已有元素
live	die	1.9-	应该已经弃用
delegate	undelegate	1.4.2+	一般用于委派
on	off	1.7+	最常用的

资料显示：实际上bind、live、delegate都是调用了on方法

//直接绑定事件
$("button").click(function(){

});

//on监听器
$("button").on("click",function(){

});

//监听多个事件，对象绑定一个函数，一般使用delegate，但on也可以
$("button").delegate("mouseover click",function(){
    
});

//监听多个事件，绑定多个函数
$("button").on(
mouseover :function(){},
mouseout  :function(){}
);

//事件委派
$("document").on("click","p",function(){});

与原生dom不同，对于同一对象的同一个事件即使不使用监听器jQuery并不会互相覆盖
部分事件只能使用监听器方法

事件移除

//移除事件
$("button").off();      //移除全部事件
            //off不一定与on成对出现
            
$("button").off("click");//移除一种事件

$("button").click（sayhello）;//如果传入的事件是函数
$("button").off("click",sayhello);//可以移除指定事件

取消冒泡

jQuery是js的一个类库，那么便脱离不了原生特性
在js中事件会由内向外传递
如何取消冒泡？

// return false;
$("button").click(function(){
    return false;
});

// event.stopPropagation();
$("button").click(function(event){
   event.stopPropagation();
});

取消默认行为

很多原素都有默认行为，比如a标签的跳转
如何取消默认行为？

// return false;
$("button").click(function(){
    return false;
});

// event.preventDefault();
$("button").click(function(event){
   event.preventDefault();
});

事件的自动触发

$("button").trigger("click");//发生冒泡
                             //有默认行为
    //注意a标签是特殊的，不触发默认行为,可以在内部加一个span标签让点击事件向上冒泡

$("button").triggerHander("click");//不会冒泡
                                    //不具有默认行为

自定义事件

使用on监听器可以自定义事件，然后可以使用自动触发,触发事件
像是匿名函数？不是很明白这种事件的作用

		$(".box").on("myClick",function(){
			alert("bx")
		});
		
		$("a").trigger("myClick");

事件的命名空间

在事件后面加命名空间.XXX不会影响事件的执行click.hello依旧能被点击触发并正常冒泡
可以提高可读性，同时可以更准确的进行自动执行(命名空间也仅对于自动执行有效)
冒泡会触发相同命名空间的父元素事件

	$("button").on("click",function(){
		console.log("hello1");
	});
	
	$("button").on("click.hello",function(){
		console.log("hello2");
	});//点击可以触发并正常对click事件冒泡
	
	
	$("button").trigger("click.hello")；
	//只会执行有命名空间的事件，冒泡触发带有同命名空间的事件
	

动画

显示与隐藏

$("button").show(100,function(){});//显示可指定完成时间和回调函数  
$("button").hide(100,function(){});//隐藏
$("button").toggle(100,function(){});//切换

左上角向右下角放大，并逐渐不透明

展开和收起

$("div").slideDown(100,function(){});//展开
//------------------------------------
$("div").slideUp(100,function(){});//收起
//-------------------------------------
$("div").slideToggle(100,function(){});//切换

宽度逐渐变大

淡入淡出

$("div").fadeIn(100,function(){});//淡入

$("div").fadeOut(100,function(){});//淡出

$("div").fadeToogle(100,function(){});//切换

$("div").fadeTo(100,0.5,function(){});//淡入到（不透明程度）

透明度改变

自定义动画

$("box").animate({
    width：100px,
    height:100px
},100,"Linear",function(){});
//四个参数：变化的属性，完成时间，动画节奏（默认缓懂）,回调函数
//多个参数写在同一个动画里会同时变化
//----------------------------------------------------------
$("box").animate({
    width:"+=100";//累加属性，进行一次变宽一次
},100);
//---------------------------------
$("box").animate({
    widtn:"toggle";//关键字，宽度变小再变大
},100);

动画的功能方法

delay(1000);//延时
//---------------------------------------------------------
stop();//停止当前正在执行的动画，并继续下一个应该执行的动画
//空值等同于stop(false);

stop(true);//停止全部动画
stop(false,true);//立即完成当前动画，并继续下一个应该执行的动画
stop(true,true);//立即完成当前动画，停止后续动画
即：传入两个参数；
参数一：是否结束后续动画
参数二：是否立即完成当前动画
//----------------------------------------------------------
jQuery.fx.interval = ;//帧数，动画帧数默认13
jQuery.fx.off = ;//是否关闭全部动画