JQuery霹雳：四、事件

(原创：灰灰虫的家http://hi.baidu.com/grayworm)
本文用到的HTML代码：
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
   jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
一、事件绑定
bind(type[,data],fn);
type：事件类型。如：blur,focus,load,resize,scroll,upload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等
data：作为event.data属性传递给事件对象的额外数据对象。
fn：用来绑定的函数。

1.单击标题，显示与隐藏内容

《图1》

2.鼠标移到标题上，显示内容；移出标题隐藏内容

《图2》

3.简写绑定事件：
像click,mouseover,mouseout之类的事件，程序中经常会用到，JQuery提供了简单的写法，可以有效减少代码量。像上面的代码可以作如下修改：

《图3》

二、复合事件
JQuery中有两个复合事件hover()和toggle()
1.hover(enter,leave)
当光标移动到元素上时，会触发第一个函数（enter），当光标移出这个元素时，会触发第二个函数（leave）。
如：

《图4》

2.toggle(fn1,fn2...fnN)
当第1次单击元素时，触发fn1；再单击同一元素，触发fn2；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
JQuery代码如下：

《图5》(原创：灰灰虫的家http://hi.baidu.com/grayworm)

三、事件冒泡
如果页面DOM树底层的元素某事件被触发，它会沿DOM树依次向上调用父辈元素对应的某事件。比如：页面DIV中的Span标记被单击，那它会依次触发Span的click事件、Div的click事件、Body的click事件。
1.事件对象
在JQuery中使用事件对象非常简单，只需要在事件绑定函数中传入一个参数即可
$('element').bind("click",function(event){   //event就是事件对象
//...
});

2.停止事件冒泡
使用事件对象event的stopPropagation()方法来停止事件冒泡。

《图6》

3.阻止默认行为
网页中的好多元素都有自己的默认行为，如：超连接点击会跳转页面，“submit”按钮点击会提交页面。如果要阻止默认行为可以使用事件对象event的preventDefault()方法。

《图7》

《图8》

4.使用函数的“return false”相当于同时使用event.stopPropagation()和event.preventDefault();

5.事件对象的其它属性
event.pageX()和event.pageY()：代表鼠标相对于页面的横纵坐标。
event.which()：鼠标的按键1-左键，2-中键，3-右键
event.metaKey()：获取ctrl按键

四、移除事件
unbind([type][,data])
1.如果不带任何参数，则移除相应对象上的所有绑定的事件。

《图9》

2.如果提供了事件类型作为参数，则只删除该类型的绑定事件。
<script type="text/javascript"> 
$(function(){
    $('#btn').bind("click", function(){
      $('#test').append("<p>我的绑定函数1</p>");
     }).bind("click", function(){
      $('#test').append("<p>我的绑定函数2</p>");
     }).bind("click", function(){
      $('#test').append("<p>我的绑定函数3</p>");
        });
    $('#delAll').click(function(){
     $('#btn').unbind("click");
    });
})
</script>

3.如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

《图10》

五、模拟操作
trigger(type[,data])
来模拟用户操作，达到触发某个事件的函数。
type：事件名称。
data：要传递给事件处理函数的附加数据。

《图11》