click()bind()live()和delegate()方法

Posted SkyTeam_LBM

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于click()bind()live()和delegate()方法的主要内容,如果未能解决你的问题,请参考以下文章

jquery bind live delegate on

jQuery中.bind() .live() .delegate() .on()的区别

jQuery中.bind() .live() .delegate() .on()区别

Jquery中的bind(),live(),delegate(),on()绑定事件方式

JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

bind() live()和delegate 区别