live()方法用法详解

来源:互联网 发布:淘宝退货赠品要退吗 编辑:程序博客网 时间:2024/05/15 03:57

live()方法用法详解:

此方法的在jQuery中使用率相当高,并且具有独特的特点,且从其语法结构上不能够看出此方法的独特之处,下面就通过实例详细介绍一下次方法的用法。先看一段代码实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">span{  color:green;  font-size:12px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){   $("div").live("click",function(){     $("span").text("太阳出来了");   }) }) </script></head><body><div>蚂蚁部落</div><span></span></body></html>
以上代码中,当点击div的时候会执行一个事件处理函数,为span元素设置文本内容,就像jQuery API手册开头所说,此方法可以为匹配元素附加一个事件处理函数,但是事实并非如此,事件处理函数并没有被绑定匹配的div元素上,而是被绑定到了DOM树的顶层document上,任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的触发元素是否为div,如果条件满足的话,就执行附加的事件处理函数。live()方法的实现方式其实就是事件委托,对于提高代码的执行效率有着很大的帮助。当然事件处理方法并非只能帮顶到document元素上,可以人为的指定要绑定的DOM元素。代码实例如下:

复制代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">span{  color:green;  font-size:12px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){   $("p",$("#myul")[0]).live("click",function(){     $("span").text("太阳出来了");   }) }) </script></head><body><div>  <ul id="myul">    <li>      <p>蚂蚁部落</p>    </li>  </ul></div><span></span></body></html>
复制代码

以上代码将事件处理函数绑定于ul上,而非绑定在document上。

对于新添加的元素也是有效的:

在实际应用中,可能需要根据条件添加新的元素,live()方法对新添加的匹配元素也是有效的。代码实例如下:

复制代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">span{  color:green;  font-size:12px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){   $("div").live("click",function(){     $("span").text("太阳出来了");   })   $("button").click(function(){     $("span").after("<div>新添加的元素</div>");   }) }) </script></head><body><div>蚂蚁部落</div><span></span><button>添加新元素</button></body></html>
复制代码

点击新添加的div元素依然能设置span元素中的文本内容,所以live()方法对于新添加的元素也是有效的,这一点bind()不能做到。
event.stopPropagation()不能阻止live()的事件冒泡:

复制代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">span{  color:green;  font-size:12px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){   $("p").live("click",function(e){     e.stopPropagation();     $("span").text("太阳出来了");   }) }) </script></head><body><div>  <ul id="myul">    <li>      <p>蚂蚁部落</p>    </li>  </ul></div><span></span></body></html>
复制代码

由以上代码可以看出e.stopPropagation()并没有阻止事件处理函数的执行,所以并没有阻止事件冒泡。



0 0
原创粉丝点击