jquery 委托 on() | off()删除委托 | one()只执行一次的委托
浏览数：65 /
时间：2015年06月09日
《1》
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<!--------------------------------live()|die()-->
<button id="a">a</button>
<button id="b">b</button>
<button id="c">c</button>
<!--------------------------------delegate()|undelegate()-->
<div id="box">
<input type="button" value="按钮" />
<button>我是button</button>
</div>
<!----------------------------on()|off()| one()-->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
<script type="text/javascript">
//-------------------------------------------------live（）
$("button").live("click", function () {
alert('点击了')
})
//上面这段代码的意思是：调用live方法将document绑定一个click事件。当单击button元素触发click事件的时候，首先会调用event.type属性来判断当前事件是否是一个click事件，同时会调用event.target来判断当前点击的元素是不是button元素，如果是的话，那么就触发这个click事件，所以弹出了“点击了”
//现在我们来想想，既然我们是给document绑定的click事件，为什么点击button会触发click事件呢? 那我们就要说说button与document的关系了。document是表示当前的html文档，而所有的html元素都是在存在html文档里面的吧！（比如body，div,button，input 等等）
//我们之前有学过冒泡，当子元素，与父元素同时绑定同一事件的时候，点击子元素的时候会冒泡到父元素。当我们点击页面上的任何元素的的时候其实是最终都会冒泡到了document上。
//所以当我们点击了button的时候其实也是冒泡到了document上。所以当我们点击button的时候弹出了“点击了” 【注：页面元素首先冒泡到body，然后再冒泡到document】
//其实这上这段代码与以下这段代码等同（这是我个人猜测）
$(document).click(function (e) {
if (e.type == "click" && e.target == "[object HTMLButtonElement]") {
alert("点击了");
}
})
$("button").die("click"); //删除这个委托。当点击button元素的时候就不在委托document去触发click事件了。
//--------------------------------------------------live()的替代方法delegate()
//由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、又支持链接链式调用方式的方法：delegate()和undelegate()。
//因为live()是直接给document绑定事件的，那么从子元素冒泡到父元素，再从父元素冒泡到body，再从body冒泡到document 传播的层次比较多，比较冗余。
//2,live()无法使用链式调用(因为参数特性导致) (链式调用其实就是杨中科说的链式编程)
//delegate()已经不再像live()那样直接将document绑定事件了，因为从子元素冒泡到父元素，再从父元素冒泡到body，在从body冒泡到document。传递的层次比较多。
//delegate是直接给你要点击元素的父元素绑定事件
$("#box").delegate("input", "click", function () {//delegate()的第一个参数表示我要点击的元素，第二个参数表示要绑定的事件，第三个参数是处理函数。
alert("点击了")
//这段代码的意思是将#box元素绑定click事件，当点击input元素的时候触发事件。然后调用匿名函数进行处理。
})
$("#box").undelegate("input", "click"); //删除这个委托。当点击input这个元素的时候就不在委托#box元素去触发click事件了。
//*****************************以上都是原理。上面的方法都已经被抛弃掉了。******************************************
//===================================【on()取代bind() off()取代unbind】=============================================//
//主角上场了------------------------------------------------------------ on(), off(),one()
//on()可以完全取代bind() ,off完全可以取代unbind() 看下面的代码：
$("body").click(function () { alert("用于演示事件冒泡【body】") });
$(document).click(function () { alert("用于演示事件冒泡【document】") })
//-------------------------------------------
$("button").on("click", function () { //将button绑定click事件
alert("普通绑定，取代bind")
})
//-------------------------------------------
$("button").on("click", function (e) {
e.stopPropagation(); //取消button触发的事件冒泡;
})
//-------------------------------------------
$("a").on("click",function (e) {
e.preventDefault(); //取消a触发的click事件的默认行为。主要表现在点击超链接的时候不在有跳转的功能了。（注：这里仅仅去阻止了a的默认行为，但是没有阻止a触发click事件冒泡，所以点击a的时候会弹出“用于演示事件冒泡【body】”和“用于演示事件冒泡【document】”）
})
//-------------------------------------------
$("a").on("click",function (e) {
return false; //既阻止a触发click事件冒泡，也阻止a触发click事件的默认行为。
})
//-------------------------------------------
//如果说触发事件的调用函数没有除"return fase"外任何代码，我们仅仅是想阻止事件冒泡和阻止事件的默认行为。我们也可以简写。如下：
$("a").on("click", false);
$("a").off("click"); //移除a标签绑定的click事件。
//-------------------------------------------
function f1(e) {
alert("我是f1");
}
$("a").on("click", f1); //给a标签绑定click事件，click事件的处理函数是f1
$("a").off("click", f1); //删除a标签上绑定f1函数的click事件 （即：假如我a标签绑定了click事件，如果这个事件的处理函数是f1，那么就删除这个click事件）
//注意：这里仅仅是删除了调用f1做处理函数的click事件。
//===================================【on()取代delegate() off()取代undelegate()】=============================================//
//on() 取到 delegate() off取代 undelegate() 【注：one()可以取代bind()也可也取代delegate()】
//如果用on()来取代delegate()的时候。on()和delegate（)一样，都是通过给父元素绑定事件的方式来实现的。
//-------------------------------------------
$("#box").on("click", "input", function () {
$(this).clone().appendTo("#box"); //你点击谁，谁就是$(this)； 因为这里是要你点击input来触发click事件，所以克隆的是input
})
$("#box").off("click", "input"); //删除委托，当点击input这个按钮的时候，就不在委托父元素#box去触发click事件了。
//-------------------------------------------
function f2() {
alert("我是f2");
};
$("#box").on("click", "input", f2);
$("#box").off("click", "input", f2);//删除委托；当点击input这个按钮的时候，如果触发的事件click的处理函数是f2,就删除这个委托，也就是就不在委托父元素#box去触发click事件,即不再调用f2这个函数了。
//-------------------------------------------
$("#box").on("click", "input",{ user: "张三" } ,function (e) {
alert(e.data.user); //打印出：张三
})
$("#box").off("click", "input");//删除委托； 当点击input的时候不在委托父元素#box触发click事件。
//===================================【one()只执行一次的绑定，或委托】=========================================//
//下面我们再来说说这个one（） 简单的来说，one（）是指执行一次的事件绑定
//不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。
//普通绑定
$("input").one("click", function () { //只执行一次的事件触发
alert("我只执行一次");
})
//委托
$("#box").one("click", "input", function () {
alert("只委托一次");
})
</script>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
