jq新版事件绑定.on()、解绑事件off()用法详解

jquery1.4 及之前的版本，由.click() 或 .bind()方法绑定的事件，不能适用脚本创建的新元素：即是说页面加载完成后，再动态创建的DOM元素并不能响应之前绑定的事件！

旧版本的处理方法是使用.live()方法来代替事件绑定.bind()，使得绑定的事件能适用脚本创建的新元素。

但自jq1.7版本开始，官方已明文表示不再推荐使用使用.live()方法，官方解释为：live()调用过程首先将事件方法绑定到了Document，然后，查找Document里是否有匹配元素。 这个过程对于性能来说可能比较浪费。官方推荐将.live()改成Delegate()方法，适用脚本创建的新元素。

jq1.8开始，官方又再次申明：如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法。

本文将详细介绍jq1.8中.on()用法，相关用法源码如下：

<!--实例效果文字描述，可删-->
<div class="demonstrate">
<div class="description">
<h3>jq新版事件绑定.on()、解绑事件off()用法详解</h3>
<p>年月日 星期 时分秒</p>
</div>
<div id="demo">
<ul>
<li>1 点我有3弹窗</li>
<li>2 点我有3弹窗</li>
<li>3 点我有3弹窗</li>
<li>4 点我有3弹窗</li>
</ul>
<div style="clear:both;">
<p>
<a href="javascript:;" class="bind">js->添加一个li,添加的li也能响应之前绑定的事件！</a>
</p>
<p>
<a href="javascript:;" class="unbindAllclick">解绑li 所有click事件</a>
</p>
<p>
<a href="javascript:;" class="unbindSpecifyclick">解绑li 指定事件函数的click事件2</a>
</p>
<p>
<a href="javascript:;" class="unbindNamespace">解绑li 同一命名空间中的click事件2、mouseout事件</a>
</p>
</div>
</div>
</div>
<script type="text/javascript">
// js创建新元素
$(".bind").on("click",function(){
$("ul").append("<li/>");
var temp=$("ul li").last();
temp.html($("ul li").length +"响应点击事件？");
});
// 旧版写法: 事件不能适用脚本创建的新元素
// $("ul li").bind("click",function(){
// 	alert("不响应事件!");
// })
// 旧版事件.live()：适用脚本创建的新元素写法,live()调用过程如下：我们首先将click方法绑定到了Document，然后，查找Document里是否有这个元素。 这个过程对于性能来说可能比较浪费
// $("ul li").live("click",function(){
// 	alert("响应事件!");
// })
// 新版写法一：单纯将bind改成on，事件不能适用脚本创建的新元素
// $("ul li").on("click",function(){
// 	alert("不响应事件!");
// })
// 新版写法二：将live改成Delegate，适用脚本创建的新元素
// $(".demonstrate").delegate("ul li","click",function(){
// 	alert("响应事件!");
// })
// 新版写法三：适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
// $(ele).on() ele 为匹配元素的父元素，可指定为document/body ,但从查找document/body向下检索匹配元素这个过程对于性能来说，比较浪费，推荐定成匹配元素就近的父元素！！
//如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法
$(".demonstrate").on("click","ul li",function(e){
alert("响应"+e.type+"事件1!");
});
$(".demonstrate").on("click.namespace","ul li",eventFunc=function(e){
alert("响应"+e.type+"事件2!");
});
$(".demonstrate").on("mouseout.namespace","ul li",function(e){
alert("响应"+e.type+"事件!");
});
// 新版多事件同时绑定写法
//$(".demonstrate").on({
//	mouseover:function(){
//	$(this).addClass("over");
//	},
//	mouseout:function(){
//	$(this).removeClass("over");
//	}
//},"ul li")
//
//$(".demonstrate").on("mouseover mouseout","ul li",function(e){
//	if(e.type=="mouseover"){
//		$(this).addClass("over");
//	}else{
//		$(this).removeClass("over");
//	}
//})
// 新版解绑事件写法: 可同时解绑多个事件 空格分隔开各个事件
// 解绑所有点击事件
$(".unbindAllclick").click(function(){
$(".demonstrate").off('click',"ul li");
})
// 事件函数：可解绑指定事件函数的同类事件,第3个参数：事件函数 (不需要引号)
$(".unbindSpecifyclick").click(function(){
$(".demonstrate").off('click',"ul li",eventFunc);
})
// 命名空间：解绑同一命名空间中的多类（如click、mouseout等）事件,第1个参数可直接简写命名空间即可，或写成"click.namespace mouseout.namespace"全写形式
$(".unbindNamespace").click(function(){
$(".demonstrate").off('.namespace',"ul li");
})
</script>