jQuery学习笔记（7.1）注册事件 bind（）委托注册delegate（）事件

1.普通的注册事件

例：
html：

<div>1</div>

js:

$(document).ready(function(){
	$("div").click(function(){
		alert("1");
	});
});

点击1，会弹出提示框1

2.bind()注册事件

例：
html：

<div>1</div>

js:

$(document).ready(function(){
	$("div").bind({
		click:function(){
			alert("1");
		},
		mouseenter:function(){
			alert("2");
		}
	})
});

鼠标进入1，会弹框2，点击1时，弹框1

在普通注册事件中，每次只能对一个元素操作，达到一个效果，而bind()可以对一个元素进行多个操作达到多个效果。

3.delegate（）注册委托事件

以上的方法都是有缺点的包括bind（），他们的缺点就是没办法监控实时的标签变化，一旦注册了定死了，用bind()举个例子:
html:

<button>用于增加p标签</button>
<div>
	<p>1</p>
	<p>2</p>
<div>

js:

$(document).ready(function(){
	$("button").click(function(){
     		 $("<p>新增加的p元素</p>").appendTo("div");
	});
	$("p").bind({
		click:function(){
			alert("hhh");
		}
	})
});

我们会发现先产生的p标签点击不会出现hhh的弹框，这也是可以解释的，当注册事件时的p不包括后来新产生的p，我们再来看看delegate（）注册委托事件是如何解决的。

html:

<button>用于增加p标签</button>
<div>
	<p>1</p>
	<p>2</p>
<div>

js:

$(document).ready(function(){
	$("button").click(function(){
     		 $("<p>新增加的p元素</p>").appendTo("div");
	});
    $("div").delegate("p", "click", function () {
      alert("hhh");
    });
});

这就把刚刚的问题解决了，即使是新产生的p标签也给注册了事件。使用delegate（）时要注意

第一个参数：事件由谁来执行。
第二个参数：事件的类型
第三个参数：函数要达到的效果

一般来说可以理解为将要做的事件委托给执行该事件的父类，入以上例子，最终事件由p来执行所以delegate第一个参数是p，前面的是它的父类div。