jQuery事件处理

一、bind()方法：

bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：
1、type表示事件类型，多个事件类型使用空格分隔。
2、data表示传递给绑定函数的额外数据对象，函数中使用event.data接收。
3、fn表示绑定的函数。

代码如下：

<input type="button" value="按钮"/>
<script>
	$("[type='button']").bind("click",function(){ //绑定点击事件。
		console.log("按钮");//点击按钮，控制台会出现按钮字样。
	})
</script>

二、unbind()方法：

unbind(type,[data|fn]])：删除每个匹配的元素上已绑定的事件，如果没有参数，则删除该元素上绑定的所有事件。

代码如下;

<input type="button" value="按钮"/>
<script>
	$("[type='button']").bind("click",function(){ //绑定点击事件。
		console.log("按钮");
	});
	$("[type='button']").unbind("click");//此时点击不会触发事件，因为绑定的事件被删除。
</script>

三、one()方法：

one(type,[data],fn)：该方法可以为元素绑定处理函数，当处理函数触发一次后, 立即被删除，即在每个对象上, 事件处理函数只会被执行一次。

代码如下：

<input type="button" value="按钮"/>
<script>
	$("input").one("click",function(){ //该绑定的点击事件，无论点击多少次只执行一次。
		console.log("按钮");
	})
</script>

四、trigger()方法：

trigger(type,[data])：触发每一个匹配元素上某类事件，type表示一个或多个事件类型， data表示传入函数的数据。

代码如下：

<form id="search" action="http://www.baidu.com/s">
	<input type="hidden" name="wd" value="中国"/>
</form>
<script>
	$("#search").trigger("submit");//因为form增加了submit的触发，所以直接提交表单。
</script>

五、submit()方法：

submit([[data],fn])：提交表单时触发submit 事件，该事件只适用于表单元素。

代码如下：

<form id="search" action="http://www.baidu.com/s">
	<input type="hidden" name="wd" value="中国"/>
</form>
<script>
	$("#search").submit();//因为form触发了submit事件，所以提交表单，与trigger("submit")作用相同。
</script>

六、click()方法：

click([[data],fn]) ：鼠标点击匹配元素时触发click事件。

代码如下：

<input type="button" value="按钮"/>
<script>
	$("input").click(function(){ //绑定click事件，点击按钮控制台会出现“按钮”字样。
		console.log("按钮");
	})
</script>

七、change()方法：

change([[data],fn]) ：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件。

代码如下：

<input type="text"/>
<script>
	$("input").change(function(){
		console.log("输入了内容"); //输入后控制台会出现“输入了内容”字样。
	});
</script>

如图：

八、keydown()方法：

keydown([[data],fn]) ：当键盘或按钮被按下时触发keydown事件。

代码如下：

<form id="search" action="http://www.baidu.com/s">
	<input type="hidden" name="wd" value="中国"/>
</form>
<script>
	&(window).keydown(function(){
		if(event.keyCode==13)
		{
			$("#search").submit();//进入网页，按下回车键跳转到百度搜索中国的界面。
		}
	});
</script>

九、事件冒泡：

事件会按照 DOM 层次结构像水泡一样不断向上直至顶端。如果事件处理函数中返回 false, 会对事件停止冒泡，还可以停止元素的默认行为。

代码如下：

<a href="http://www.baidu.com" onclick="return test();">百度</a>
<script>
	function test(){
		console.log("点击了...");//控制台出现字样，但是a标签并不跳转到百度。
		return false;//函数返回false，停止了事件冒泡，也停止了a事件的链接跳转行为。
	}
</script>

如图：

点击后，控制台出现字样，但是没有百度界面出现：