jquery中的事件

1、入门：加载DOM

参考： http://blog.sina.com.cn/s/blog_6fdf0e7e0100nzfa.html

很多时候,在页面的dom加载完后就可以做相应的操作。而传统的window.onload事件往往要在页面的资源全部加载完之后（包括窗口，框架，图像等）才触发该事件，

而jquery的$(document).ready(function)事件可以在dom加载之后就被触发，而不必等待到所有资源加载完毕。所有能带来更好的用户体验。

若需要在页面中所有资源下载完成后触发事件，强大的jquery还提供load方法，只要将该方法绑定到相应的对象上就可以了，比如在window对象上绑定。

$(document).ready(function)事件的优点：

a、只要DOM加载完毕就会被触发，极大地提升了用户体验（尤其是对应那些网速较慢的浏览者而言，这点就显得特别重要）

b、可以重复绑定多个事件处理函数，不像window.onload事件，绑定多个事件处理函数，只有最后一个才会生效。

c、提供简写

下面就对$(document).ready(function)事件的三种声明方法进行说明：

Javascript代码

1. $(document).ready(function)  

Javascript代码

1. $().ready(function)  

语法 3

Javascript代码

1. $(function)  

2、jquery事件绑定

使用jquery绑定事件一般使用bind方法，bind方法的声明如下：

bind(eventType,[data],fn)

其中第一个参数eventType用于指定待绑定的事件，比如常见的有:click,focus,blur等，可一次性指定多个事件，多个事件之间使用英文逗号分隔；

第二个参数是可选参数，一般很少使用，当声明该参数的时候，将允许我们传递额外的参数给事件处理函数。

第三个参数是事件处理函数。

下面是一个简单的例子：

Javascript代码

1. $('#foo').bind('click', {msg: 'hello'}, function(event){//函数传递的event对象，再也不要写event = event || window.event了，是不是很爽O(∩_∩)O~  

Javascript代码

1. alert(event.data.msg);  

对一些常见的事件，jquery特别为此提供了一套简写的方法。简写方法和bind方法相类似，实现的效果也一样，只是为了编写方便而已，比如常见的click(fn)、mouseover(fn),mouseout(fn)函数

3、合成事件

jquery中有两个合成事件，即hover()和toggle()方法，下面分别对hover()和toggle()方法进行介绍

hover方法用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的1个函数enter；当光标移出这个元素时，会触发第2个函数leave.

hover方法的语法结构如下：

Html代码

1. hover(enter,leave);//  

使用举例如下：

Html代码

1.  <h3 id='foo'>  
2.   把鼠标移到我身上吧!  
3.  </h3>  
4.  <div class='content'>  
5.     我是内容，我是内容 <br />  
6.     我是内容，我是内容 <br />  
7.     我是内容，我是内容 <br />  
8.     我是内容，我是内容 <br />  
9.     我是内容，我是内容 <br />  
10.  </div>  
11. </BODY>  
12. <script language="javascript">  
13. <!--  
14. $(function(){  
15.     $('#foo').hover(  
16.         //第一个事件处理函数,显示内容  
17.         function(){  
18.             $(this).next('div.content').show();  
19.         //第二个事件处理函数，隐藏内容  
20.         function(){  
21.             $(this).next('div.content').hide();  
22. //-->  
23. </script>  

toggle方法用于模拟鼠标连续单击事件，第1次单击元素，触发指定的第1个函数fn1，再次点击同一元素，触发第2个函数fn2；若有更多函数，则依次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

使用示例：

Html代码

1.  <h3 id='foo'>  
2.   跪求点击!  
3.  </h3>  
4.  <div class='content'>  
5.     我是内容，我是内容 <br />  
6.     我是内容，我是内容 <br />  
7.     我是内容，我是内容 <br />  
8.     我是内容，我是内容 <br />  
9.     我是内容，我是内容 <br />  
10.  </div>  
11. </BODY>  
12. <script language="javascript">  
13. <!--  
14. $(function(){  
15.     $('#foo').toggle(  
16.         //第一个事件处理函数,显示内容  
17.         function(){  
18.             $(this).next('div.content').show();  
19.         //第二个事件处理函数，隐藏内容  
20.         function(){  
21.             $(this).next('div.content').hide();  
22. //-->  
23. </script>  

4、事件冒泡

关于事件冒泡的原理介绍，可以参考我转载的一篇blog： http://blog.csdn.net/yhawaii/article/details/6938514

下面是一个冒泡的例子：

Html代码

1. <div id='div1'>  
2.     <div id='div2'>  
3.         <div id='div3'>  
4.         </div>  
5.     </div>  
6. </div>  
7. <script language="javascript">  
8. <!--  
9.     $(function(){  
10.         $('div').click(function(e){alert(this.id)});  
11. //-->  
12. </script>  

使用jquery阻止冒泡方法：event,stopPropagation();

看完了事件冒泡，下面我们就对阻止默认事件进行介绍，在浏览器中有很多默认事件，比如说默认点击右键的时候显示的是浏览器的菜单，但是假如我需要使用自己定义的鼠标右键的菜单，而不使用默认的事件，应该怎么办呢。这个时候你就需要阻止默认事件了。

在jquery中阻止默认事件方法是：event.preventDefault();

jquery不不支持事件捕获，若需要的话，只能使用原生的javascript了

5、事件对象的常见属性

• type属性，用于获取事件的类型，比如说获取点击事件是click，event.type();
• event.pageX,event.pageY属性

event.pageX/event.pageY相当于ie中的event.x/event.x,firefox中的event.pageX/event.pageY.jquery对event.pageX/event.pageY进行了封装，使其支持多浏览器

• event.target属性，获取触发事件的DOM元素（注意不是jquery元素）
• event.which属性，用于获取在鼠标单击事件中，按下的是哪个键,1 = 鼠标左键， 2 =鼠标中间， 3 = 鼠标右键
• event.originalEvent属性，指向原始的DOM事件对象
• event.preventDefault()方法，阻止默认事件

• event.stopPropagation()方法，阻止冒泡

• event.relatedTarget属性

  在标准的DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget方法在mouseover中相当于ie浏览器中的event.fromElement()方法，在mouseout中相当于ie浏览器的event.toElement方法，jquery对其进行了封装，使之兼容多种浏览器。

  下面是一个例子：

  Html代码

  1. <div id="dv1">  
  2.     移动到我身上吧！  
  3. </div>   
  4. <div id='dv2'>gweag</div>  
  5. <script language="javascript">  
  6. <!--  
  7.     $(function(){  
  8.         $('#dv1').bind('mouseover',function(event){  
  9.             alert("我是从id为“"+event.relatedTarget.id+"”的元素进入元素的");  
  10.             //event.preventDefault();  
  11.             return false;  
  12. //-->  
  13. </script>  

6、移除事件

既然已经学习了如何绑定事件，那么下面对学习一下如何移除已绑定的事件吧！

jquery中移除事件的两个方法unbind()方法和one方法

unbind()方法，从每一个匹配的元素中删除绑定的事件，其定义如下：

Html代码

1. unbind(eventType,[data])//其中第一个参数是事件类型，如常见的'click'，data为绑定给事件的事件处理函数名。若一个参数都没有指定，则默认移除所有事件绑定  

7、模拟事件

trigger方法使用示例：

Html代码

1. <div id="foo">  
2. I am foo!  
3.  </div>  
4.  <button οnclick="" id='btn'>click me!</button>  
5.  <script language="javascript">  
6.  <!--  
7. var $foo = $('#foo');  
8. //为foo元素绑定事件  
9. $foo.bind('click',function(){  
10.     alert(111);  
11. //点击按钮时，使用trigger函数模拟foo的点击操作  
12. $('#btn').click(function(){  
13.     $foo.trigger('click');