jquery的事件和委派:
# 背景
灵活的事件处理机制是一个优秀JavaScript框架必须具有的最重要的功能之一。
事件委派机制
# 委派事件函数:.live(type,function),这个函数的意思是:给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。
举例: 单击每一个段落(包括页面加载完毕后新增的段落)时,弹出段落的ID值。
<body>
<div>
<p id="1">the first paragraph </p>
<p id="2" class="select">the second paragraph</p>
<p id="3"><span>the third paragraph</span></p>
</div>
<script type="text/javascript">
//给每个段落的click事件委派函数,该函数弹出当前段落的ID值
$("p").live("click",function(){
alert($(this).attr("id"));
});
//给id=3的段落绑定click事件,单击后给其增加一个段落
$("#3").bind("click",function (){
$("#3").after("<p id=/"4/"><span>the fourth paragraph</span></p>");
});
//注意:对于新增的ID为4的段落,也"被委派"了click事件的处理函数
</script>
</body>
#移除委派事件函数 .die([type],[function])
此方法与live正好完全相反. 如果不带参数,则所有绑定的live事件都会被移除。如果提供了type参数,那么会移除对应的live事件.举例:
<body>
<div>
<p id="1">the first paragraph </p>
<p id="2" class="select">the second paragraph</p>
<p id="3"><span>the third paragraph</span></p>
</div>
<script type="text/javascript">
//给每个段落的click事件委派函数,该函数弹出当前段落的ID值
$("p").live("click",function(){
alert($(this).attr("id"));
});
//给id=3的段落绑定click事件,单击后给其增加一个段落
$("#3").bind("click",function (){
$("#3").after("<p id=/"4/"><span>the fourth paragraph</span></p>");
});
//注意:到此为止,对于新增的ID为4的段落,也"被委派"了click事件的处理函数
//当单击ID为2的段落时 解除所有委派给click事件的处理函数
$("#2").bind("click",function (){
$("p").die("click");
});
</script>
</body>
-------------------------------------------------------------