click()、bind()、live()和delegate()方法
我之前使用click()比较多,又来因为网页内容需要前端生成用了live().有的时候使用click()和bind()分不清楚该怎么试用.查了很多资料.测试了很多次,自己明白了.
总结如下:代码注释很详细,感觉不用在分段写了.都写在一起了.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="#">点击</a> 9 <div class="box" style="cursor:pointer;">live</div> 10 <div id="test"><a href="#">live支持链式编程吗?</a></div> 11 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 $("<div class='box2' style='cursor:pointer;'>live</div>").appendTo("body"); 15 }); 16 $("a").click(function(){ 17 console.log("click"); 18 }); 19 /*** 20 *click()方法是bind()方法的一种简单方法. 21 * 在bind()中, jQuery所有JavaScript事件对象, 比如focus, mouseover, resize, mousemove和mouseout,都可以作为type参数传递进来的. 22 */ 23 var message = "left"; 24 $("a").bind("click",{ msg: message }, function(e) { 25 console.log(e.data.msg); 26 return false; 27 }); 28 var message = "right"; 29 $("a").bind("contextmenu",{ msg: message }, function(e) { //contextmenu:鼠标右击与键盘的菜单触发键 30 console.log(e.data.msg); 31 return false; 32 }); 33 /*** 34 * 这样当我们左键单击<a>时，输出"left";当右键单击<a>时，输出"right". 35 */ 36 37 /*** 38 * live()给所有匹配的元素附加一个时间处理函数, 即使这个元素是以后添加进来的也有效. 39 */ 40 $("div.box").bind("click", function() { 41 console.log("success bind"); 42 }); 43 44 /*** 45 * 当点击class="box"为live时, 打印出success. 46 * 此时,如果有新元素添加进来,该如何操作? 47 * 这时, 当使用上边方法点击class为live的a标签时, 不会执行. 48 * 原因:这个元素是在调用bind()之后添加的, 而使用live方法使得在后边添加的元素也能够执行相应的事件. 49 */ 50 $("div.box2").live("click", function() { 51 console.log("success live"); 52 }); 53 /*** 54 * live()方法不支持链式编程 55 */ 56 $("#test").children("a").live("mouseover", function() { 57 console.log("支持链式编程");//报错,不支持链式编程 Error: Syntax error, unrecognized expression: #test.children(a) 58 }); 59 60 /*** 61 * 上面这种写法并不会输出, 我们这个时候可以使用delegate() 62 */ 63 $("#test").delegate("a", "mouseover", function() { 64 console.log("delegate"); 65 }); 66 /*** 67 * 这样就可以输出想要的结果. 68 */ 69 </script> 70 </body> 71 </html>
