《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>
jquery 委托 on() | off()删除委托 | one()只执行一次的委托
原文地址:http://blog.csdn.net/fanbin168/article/details/45032169