jquery中的事件

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)事件的三种声明方法进行说明：

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)

2、jquery事件绑定

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

bind(eventType,[data],fn)

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

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

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

下面是一个简单的例子：

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

	alert(event.data.msg);
});

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

3、合成事件

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

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

hover方法的语法结构如下：

hover(enter,leave);//

使用举例如下：

  <h3 id='foo'>
   把鼠标移到我身上吧!
  </h3>
  
  <div class='content'>
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
	 </div>
 </BODY>
 <script language="javascript">
 <!--
	$(function(){
		$('#foo').hover(
			//第一个事件处理函数,显示内容
			function(){
				$(this).next('div.content').show();
			},
			//第二个事件处理函数，隐藏内容
			function(){
				$(this).next('div.content').hide();
			});
	})
 //-->
 </script>

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

使用示例：

  <h3 id='foo'>
   跪求点击!
  </h3>
  
  <div class='content'>
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
		我是内容，我是内容 <br />
	 </div>
 </BODY>
 <script language="javascript">
 <!--
	$(function(){
		$('#foo').toggle(
			//第一个事件处理函数,显示内容
			function(){
				$(this).next('div.content').show();
			},
			//第二个事件处理函数，隐藏内容
			function(){
				$(this).next('div.content').hide();
			});
	})
 //-->
 </script>

4、事件冒泡

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

下面是一个冒泡的例子：

<div id='div1'>
	<div id='div2'>
		<div id='div3'>
			div3
		</div>
	</div>
</div>
<script language="javascript">
<!--
	$(function(){
		$('div').click(function(e){alert(this.id)});
	});
//-->
</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对其进行了封装，使之兼容多种浏览器。

  下面是一个例子：

  <div id="dv1">
  	移动到我身上吧！
  </div> 
  <div id='dv2'>gweag</div>
  
  <script language="javascript">
  <!--
  	
  	$(function(){
  		$('#dv1').bind('mouseover',function(event){
  			alert("我是从id为“"+event.relatedTarget.id+"”的元素进入元素的");
  			//event.preventDefault();
  			return false;
  		});
  	});
  //-->
  </script>
  

  
  
  

6、移除事件

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

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

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

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

7、模拟事件

trigger方法使用示例：

 <div id="foo">
	I am foo!
  </div>
  <button onclick="" id='btn'>click me!</button>
  <script language="javascript">
  <!--
	var $foo = $('#foo');
	//为foo元素绑定事件
	$foo.bind('click',function(){
		alert(111);
	});
	//点击按钮时，使用trigger函数模拟foo的点击操作
	$('#btn').click(function(){
		$foo.trigger('click');
	});