程序博客网 > 英语网络课程哪个好

JavaScript的事件和委派

来源：互联网发布：英语网络课程哪个好编辑：程序博客网时间：2024/06/04 18:16

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>

-------------------------------------------------------------

0 0

英语网络课程哪个好

英语网络课程哪个好

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子何首乌野生白首乌何首乌何首乌片怎么吃何首乌叶子能吃吗白首乌与何首乌的区别何首乌果实何首乌有什么作用求购何首乌何首乌黑芝麻粉何首乌山鸡何首乌的用途秘制蒜香排骨娄雪飞制香多功能制香机价格制香机哪家好宏盛制香机全自动制香机多少钱一台制香机械厂家制包厂制箱厂制香业制砂厂如何制香制香技术制香加工制香粉碎机制香的机器全自动制香机器价格制香机子制香机器图片办制香厂制香厂怎么跑销售开个制香厂开香厂吕氏制香厂小制香厂小冈制香厂香厂开个制香厂需要多少钱生产佛香的厂家创办制香厂创业全指南