JQuery学习(三)事件

事件绑定
bind(type [,data],fn)对指定元素添加事件绑定。
同时绑定多个事件：

$('#foo').bind('click', fn1=function() {
    //...
 }).bind('click',fn2=function()
{
    //...
}).bind('click',fn3=function()
{
    //...
});

同时绑定多种事件，每个事件类型用空格分隔:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

为事件添加命名空间
如果type参数的字符串中包含一个点(.)字符，那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间

$(function()
{
    $("div").bind("click"),function()
    {
 alert("click");
    }
    $("div").bind("click.nameSpace"),function()
    {
 alert("click.nameSpace");
    }
    $("button").bind("click"),function()
    {
 $("div").trigger("click!");//!表示只触发click，而不触发click.nameSpace，若没有!，则2个事件全部触发
    }
})

单击div时，会同时触发2个click事件

移除事件
unbind()
如果没有传递参数，则删除元素的所有事件；
如果将提供的事件类型作为参数，则只删除该类型的绑定事件；
如果把在绑定时传递的处理函数作为第二个参数，则只删除这个特定的事件处理函数。

合成事件
hover()和toggle()
hover(enter,leave)，用于模仿光标悬停事件。当光标移动到元素上时，会触发enter；离开元素则触发leave。
toggle(fn1,fn2...),用于模仿鼠标单击事件,当鼠标单击指定元素时,没单击一次，依次执行fn，直到最后一个。随后对每次单击都重复前面的过程。

事件对象

$("element").bind("click",function(event)
{
 //...
})

event即为事件对象，当触发element的click事件时，事件对象e就会被创建，当这个事件对象的事件处理函数结束后，事件对象就会被销毁
事件对象的属性
1.event.type();获取事件类型(click)
2.event.stopPropagation();//停止冒泡事件
3.event.preventDefault();//阻止默认行为(单击链接a标签是自动转向)
4.event.target();//捕获触发事件的元素
5.event.pageX()/event.pageY();//捕获光标的坐标
6.event.witch();//在鼠标单击事件中捕获鼠标的左(1)中(3)右(2)按键；在键盘事件中捕获键盘的按键。
7.event.metaKey();//捕获键盘的<ctrl>按键

事件冒泡
<div id="div">
 <p id="p">
  <span id="span">事件冒泡</span>
 </P>
</div>
为div、p、和span分别绑定click事件，当触发span的click事件时，同时也将触发p和div的click事件，此时成为冒泡事件。

模拟操作
trigger()
$("#btn").trigger("click");//自动触发btn的click事件，可简写成：
$("#btn").click();
触发自定义事件
$("#btn").bind("myClick",function()
{
    //...
})

想要触发自定义事件myClick，就需使用trigger();

$("#btn").trigger("myClick");

传递数据
trigger(type[,data]);
第一个参数type为要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。

$("#btn").bind("myClick",function(event,mes1,mes2)
{
    alert(mes1+mes2);
})
$("#btn").trigger("myClass",["我的自定义","事件"]);

执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。
$("input").trigger("focus");
以上代码不仅触发了为<input>绑定的focus事件，也会是<input>本身获取焦点。
若不想执行浏览器默认操作，可以使用triggerHandler()。

JQuery中的动画
show([speed][,callback])和hide([speed][,callback])
分别控制元素的现实和隐藏，hide()将选定元素的display设置为none，与css("display","none")相同
他们都接受一个参数，来控制元素现实和隐藏的速度，以毫秒为单位。同时可以设置一个回调函数，当动画执行完成时执行
fadeIn([speed][,callback])、fadeOut([speed][,callback])
改变元素的透明度，fadeOut()在一定时间内降提高元素的透明度，使之透明，fadeIn()正好相反。
slideUp(speed, [callback])、slideDown(speed, [callback])
如果一个元素的dispalay为none，调用slideDown，该元素将由上至下延伸现实,slideUp()相反

自定义动画animate
animate(params,speed,callback);
1.params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
2.speed:可选的速度参数
3.callback:动画完成时执行的函数，可选
$("div").animate({left:"500px",height:"200px"},3000)；//div向右滑动，同时放大元素高度
$("div").animate({left:"500px"},300);
$("div").animate({height:"200px"},300);//先向右滑动，在放大高度
简写：
$("div").animate({left:"500px"},300).animate({height:"200px"},3000);
停止动画
stop([clearQueue][,gotoEnd]);
clearQueue:bool值，true为代表清空未执行完的动画。
gotoEnd：bool值，代表是否直接将正在执行的动画跳转到末状态。
如果直接使用stop(),动画会立即停止，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。
判断元素是否处于动画状态
if(!$(element).is(":animated"))
{
    //...
}

其他动画方式
slideToggle()
通过高度变化来切换匹配元素的可见性(可以说时slideDown()和sliedeUp()的集合体)
fideTo()
把元素的不透明度通过渐进的方式调整到制定的值。

$("#foo").unbind("fn1");
$("#foo").unbind(".nameSpace");//移除所有nameSpace命名空间的事件

one()
该方法与bind()方法类似，使用方法也与bind()相同，它的作用就是当元素的绑定事件触发一次后，就会立即解除绑定。