jquery on()方法绑定多个选择器,多个事件
jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM元素并不能响应之前绑定的事件!
旧版本的处理方法是使用.live()方法来代替事件绑定.bind(),使得绑定的事件能适用脚本创建的新元素。
但自jq1.7版本开始,官方已明文表示不再推荐使用使用.live()方法,官方解释为:live()调用过程首先将事件方法绑定到了Document,然后,查找Document里是否有匹配元素。 这个过程对于性能来说可能比较浪费。官方推荐将.live()改成Delegate()方法,适用脚本创建的新元素。
jq1.8开始,官方又再次申明:如果你开发最新版本的jQuery,完全可以使用on()方法来处理所有的事件绑定,避免过多的方法调用,因为其实在最新版本的jQuery类库中,所有以上旧版方法在后面其实都是调用on()方法。
本文将详细介绍jq1.8中.on()用法,相关用法源码如下:
1 <!--实例效果文字描述,可删--> 2 <div class="demonstrate"> 3 <div class="description"> 4 <h3>jq新版事件绑定.on()、解绑事件off()用法详解</h3> 5 <p>年月日 星期 时分秒</p> 6 </div> 7 <div id="demo"> 8 <ul> 9 <li>1 点我有3弹窗</li> 10 <li>2 点我有3弹窗</li> 11 <li>3 点我有3弹窗</li> 12 <li>4 点我有3弹窗</li> 13 </ul> 14 <div style="clear:both;"> 15 <p> 16 <a href="javascript:;" class="bind">js->添加一个li,添加的li也能响应之前绑定的事件!</a> 17 </p> 18 <p> 19 <a href="javascript:;" class="unbindAllclick">解绑li 所有click事件</a> 20 </p> 21 <p> 22 <a href="javascript:;" class="unbindSpecifyclick">解绑li 指定事件函数的click事件2</a> 23 </p> 24 <p> 25 <a href="javascript:;" class="unbindNamespace">解绑li 同一命名空间中的click事件2、mouseout事件</a> 26 </p> 27 </div> 28 </div> 29 </div> 30 <script type="text/javascript"> 31 // js创建新元素 32 $(".bind").on("click",function(){ 33 $("ul").append("<li/>"); 34 var temp=$("ul li").last(); 35 temp.html($("ul li").length +"响应点击事件?"); 36 }); 37 // 旧版写法: 事件不能适用脚本创建的新元素 38 // $("ul li").bind("click",function(){ 39 // alert("不响应事件!"); 40 // }) 41 // 旧版事件.live():适用脚本创建的新元素写法,live()调用过程如下:我们首先将click方法绑定到了Document,然后,查找Document里是否有这个元素。 这个过程对于性能来说可能比较浪费 42 // $("ul li").live("click",function(){ 43 // alert("响应事件!"); 44 // }) 45 // 新版写法一:单纯将bind改成on,事件不能适用脚本创建的新元素 46 // $("ul li").on("click",function(){ 47 // alert("不响应事件!"); 48 // }) 49 // 新版写法二:将live改成Delegate,适用脚本创建的新元素 50 // $(".demonstrate").delegate("ul li","click",function(){ 51 // alert("响应事件!"); 52 // }) 53 // 新版写法三:适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) 54 // $(ele).on() ele 为匹配元素的父元素,可指定为document/body ,但从查找document/body向下检索匹配元素这个过程对于性能来说,比较浪费,推荐定成匹配元素就近的父元素!! 55 //如果你开发最新版本的jQuery,完全可以使用on()方法来处理所有的事件绑定,避免过多的方法调用,因为其实在最新版本的jQuery类库中,所有以上旧版方法在后面其实都是调用on()方法 56 $(".demonstrate").on("click","ul li",function(e){ 57 alert("响应"+e.type+"事件1!"); 58 }); 59 $(".demonstrate").on("click.namespace","ul li",eventFunc=function(e){ 60 alert("响应"+e.type+"事件2!"); 61 }); 62 $(".demonstrate").on("mouseout.namespace","ul li",function(e){ 63 alert("响应"+e.type+"事件!"); 64 }); 65 // 新版多事件同时绑定写法 66 //$(".demonstrate").on({ 67 // mouseover:function(){ 68 // $(this).addClass("over"); 69 // }, 70 // mouseout:function(){ 71 // $(this).removeClass("over"); 72 // } 73 //},"ul li") 74 // 75 //$(".demonstrate").on("mouseover mouseout","ul li",function(e){ 76 // if(e.type=="mouseover"){ 77 // $(this).addClass("over"); 78 // }else{ 79 // $(this).removeClass("over"); 80 // } 81 //}) 82 // 新版解绑事件写法: 可同时解绑多个事件 空格分隔开各个事件 83 // 解绑所有点击事件 84 $(".unbindAllclick").click(function(){ 85 $(".demonstrate").off('click',"ul li"); 86 }) 87 // 事件函数:可解绑指定事件函数的同类事件,第3个参数:事件函数 (不需要引号) 88 $(".unbindSpecifyclick").click(function(){ 89 $(".demonstrate").off('click',"ul li",eventFunc); 90 }) 91 // 命名空间:解绑同一命名空间中的多类(如click、mouseout等)事件,第1个参数可直接简写命名空间即可,或写成"click.namespace mouseout.namespace"全写形式 92 $(".unbindNamespace").click(function(){ 93 $(".demonstrate").off('.namespace',"ul li"); 94 }) 95 </script>
转自:http://www.phpvar.com/archives/2529.html