jQuery事件

事件在元素对象与功能代码中起着非常重要的作用

严格来说，事件在触发之后分为两个阶段，第一是捕获阶段，然后是冒泡阶段，但是遗憾的是，很多浏览器都不支持捕获事件，因此直接执行冒泡事件，所谓的冒泡就是事件执行中的顺序

可以通过stopPropagation()方法阻止冒泡事件

页面载入事件

jQuery中的页面载入事件ready()类似于JavaScript中的OnLoad()方法，只是在事件执行时间上有区别。OnLoad()方法必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的元素过多或者过大，那么要等到OnLoad()方法执行完毕后，用户才能进行操作。如果使用jQuery中的ready()方法加载页面，则只要页面的DOM模型加载完毕，就会触发ready方法。

ready方法的工作原理：

在jQuery加载页面时，会设置一个isReday的标记，用于监听页面的加载的进度。当然遇到执行ready方法时通过查看isReady值是否被设置，如果未被设置，那么说明页面没有被完全加载，在此情况下，将未完成加载的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。

ready方法的写法

<script type="text/javascript">
	//写法一
	$(function() {
		//代码部分
	});
	//写法二
	$(document).ready(function() {
		//代码部分
	});
	//写法三
	jQuery(document).ready(function() {
		//代码部分
	});
	//写法四
	jQuery(function() {
		//代码部分
	});
</script>

绑定事件

绑定按钮的单机事件

<script type="text/javascript">
	//写法一
	$(function() {
		$("input").click(function(){
			alert("绑定按钮的单击事件");
		});
	});		
</script>
<div class="wrapper">
	<input type="button" value="点击开始" />
</div>

在jQuery中还可以使用bind()方法进行事件的绑定

bind()功能是为每个选择元素的事件绑定处理函数。语法：bind(type,[data],fn);

其中type为一个或多个类型的字符串，如"click",也可以自定义类型，也可以是被参数type调用的类型，

data参数是作为event.data属性值传递给事件对象的额外数据对象。

通过bind方法绑定事件

<script type="text/javascript">
			$(function() {
				$("input").bind("click",function(){
					alert("bind");
				});
			});
			
		</script>
		<div class="wrapper">
			<input type="button" value="点击开始" />
		</div>

切换事件

在jQuery中有两个方法可以用来切换事件，分别是hover()和toggle(),所谓切换事件，就是两个以上的事件绑定一个元素，在元素的行为动作间进行切换，

hover方法是在鼠标悬停和鼠标移出的事件进行切换

该方法所实现的功能，也可以通过jQuery事件mouseseenter和mouseleave实现

hover方法语法：hover(over,out);

两个参数over和out，分别是鼠标悬停和鼠标移出的事件代码段

用hover方法，实现鼠标经过文字变红色，鼠标移出文字变蓝色的功能

<script type="text/javascript">
	$(function() {
		$("p").hover(function(){
			$(this).css('color','red');
		},function(){
			$(this).css('color','blue');
		});
	});
			
</script>
<div class="wrapper">
	<p>hover方法</p>
</div>

toggle方法

该方法可以依次调用N个指定函数，知道最后一个函数，然后重复对这些函数轮番调用，每次单机后依次调用函数。语法如是：toggle(fn1,fn2...);

用toggle方法，实现鼠标单击文字，依次改变文字的颜色

<script type="text/javascript">
	$(function() {
		$("p").toggle(function() {
			$("p").css("color", "green");
		}, function() {
			$("p").css("color", "red");
		}, function() {
			$("p").css("color", "yellow");
		});
	});
</script>
<div class="wrapper">
	<p>
		hover方法
	</p>
</div>

移除事件

在DOM对象的操作中，有绑定事件，当然也有解除绑定，在jQuery中，提供unbind()方法移除绑定事件，语法：unbind([type],[fn]);其中type为移除的事件类型，fn为需要移除的事件出来函数，如果该方法没有参数，则移除所有的绑定事件。

点击按钮，移除p元素的绑定事件

<script type="text/javascript">
	$(function() {
		$("p").click(function(){
			alert("绑定点击");
		});
		$("input").click(function(){
			$("p").unbind("click");
		});
	});
</script>
<div class="wrapper">
	<p>
		hover方法
	</p>
	<input type="button" value="移除绑定" />
</div>

其他事件

one();

该方法是为所选元素绑定一个仅触发一次的处理函数，语法：one(type,[data],fn);

其中type为事件的类型，既要触发的事件类型。data参数是作为event.data属性值传递给事件对象的额外数据对象。fn为绑定事件是所要触发的函数。

使用one方法为按钮绑定一个click事件，点击按钮时弹出p元素的文本内容，再次点击按钮，不再弹出

<script type="text/javascript">
	$(function() {
		$("input").one("click",function(){
			alert($("p").text());
		});
	});
</script>
<div class="wrapper">
	<p>
		hover方法
	</p>
	<input type="button" value="one" />
</div>

trigger()方法

在DOM页面中，有时候需要在页面加载完成后自动执行以下人性化的操作，比如文本框处于选中的状态，某个按钮处于焦点中。jQuery提供trigger方法，可以很简单的实现这个功能。
该方法在所选元素上触发指定事件。语法：trigger(type,[data]);type为触发事件的类型，data为可选参数，表示在触发事件时传递给函数的附加参数。

使用trigger方法，实现文本框在页面加载完毕处于选中状态

<script type="text/javascript">
	$(function() {
		$("input").trigger("select");
	});
</script>

<div class="wrapper">
	<input type="text" />
</div>