JavaScript的事件和委派

jquery的事件和委派:

# 背景

灵活的事件处理机制是一个优秀JavaScript框架必须具有的最重要的功能之一。

事件委派机制

 

#  委派事件函数:.live(type,function),这个函数的意思是:给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。

举例: 单击每一个段落(包括页面加载完毕后新增的段落)时,弹出段落的ID值。

<body>

         <div>

           <id="1">the first paragraph </p>

           <id="2" class="select">the second paragraph</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>");             

              });

             

              //注意:对于新增的ID4的段落,也"被委派"click事件的处理函数

       </script>

</body>

 

#移除委派事件函数 .die([type],[function])

此方法与live正好完全相反. 如果不带参数,则所有绑定的live事件都会被移除。如果提供了type参数,那么会移除对应的live事件.举例:

<body>

         <div>

           <id="1">the first paragraph </p>

           <id="2" class="select">the second paragraph</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>");           

              });

             

//注意:到此为止,对于新增的ID4的段落,也"被委派"click事件的处理函数

             

              //当单击ID2的段落时 解除所有委派给click事件的处理函数

              $("#2").bind("click",function (){

                  $("p").die("click");

              });

       </script>

  </body>

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值