js中事件绑定要注意的事项之如何在方法中自己打…

2018-06-24 00:00:20来源：未知阅读 ()

下面是错误的js方法绑定，这样写会造成在方法中不能用调用方法的dom本身的一些东西，如各种属性或者jq对象等。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title></title>
 7     </head>
 8     <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
 9 
10     <body>
11         <!-- 下面是用纯动态方式生成标签 -->
12         <div id="d2">
13             动态生成a标签
14         </div>
15         
16         <div id="d3">
17             <input type="button" value="生成a标签" id="btn"/>
18             
19         </div>
20     </body>
21     <script>
22         ///错误的写法：
23         
24         var i = 0;
25         $(function() {
26             ///点击按钮，给d2动态添加标签
27             $('#btn').bind('click', function() {
28                 /* 在添加标签的同时给添加的标签绑定点击事件 */
29                 $("<li onclick='show()' num='"+(++i)+"'>Hello</li>").appendTo("#d2");
30             });
31     
32         })
33     
34         function show() {
35             alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
36             alert($(this).attr("num"));///打印的是undefined 因为$(this)不能用
37             alert("哈哈");
38             $(this).remove();//方法无效，不能自己删除自己（页面没有效果）
39         }
40     </script>
41 
42 </html>

下面才是正确的写法：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title></title>
 7     </head>
 8     <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
 9 
10     <body>
11         <!-- 下面是用纯动态方式生成标签 -->
12         <div id="d2">
13             动态生成a标签
14         </div>
15         
16         <div id="d3">
17             <input type="button" value="生成a标签" id="btn"/>
18             
19         </div>
20     </body>
21     <script>
22         ///正确的写法
23         
24         var i = 0;
25         $(function() {
26             ///点击按钮，给d2动态添加标签
27             $('#btn').bind('click', function() {
28                 /* 在添加标签的同时给添加的标签绑定点击事件 */
29                 $("<li onclick='show(this)' num='"+(++i)+"'>Hello</li>").appendTo("#d2");
30             });
31 ////注意：在标签中的绑定方法中加了个参数 this，代表js元素的dom对象本身【注意：只能用this】会传递到方法体中
32     
33         })
34     
35 /*在方法定义端，参数中随便加个变量即可，
36     如obj或者o或者a等任意变量符号都行，且其不用事先用var定义，可以直接用
37         然后在方法体中就可以用obj.value【原生的js对象的属性使用方法】或者$(obj).val()【jq的对象方法】等来操作dom本身了
38 */
39         function show(obj) {
40             alert($(obj).text());///这样会政策打印出方法的text即这里的Hello
41             alert($(obj).attr("num"));///打印属性也没问题
42             alert("哈哈");
43             $(obj).remove();//自己删除自己也是好用的
44         }
45     </script>
46 
47 </html
48 <!--
49     正确的绑定方法和原来错误的方法只有一点小区别，即：
50     1.在html标签中，绑定方法的时候，方法中加上一个参数 this【只能是this，不能用其他变量】
51     2.在方法的定义位置，方法的参数中用任意一个变量来接收页面上传递过来的this（即调用当前方法的原生js的dom对象）
52     3.在方法体中就可以用2中定义的 变量.js原生属性  或者 $(变量).val()等jq封装后的方法来对调用者dom本身进行各种操作了。
53     
54     当然，如果标签不是拼接时绑定的方法，而是后来动态绑定的，那么可以用live 方法达到同样的效果
55     【注意：只能用live方法给动态标签绑定事件，在事件中才可以操作标签本身，如果用bind方法是不能操作标签本身相关的】
56         eg:
57             ///bind方法对于动态添加的标签不好使，其只对已经存在的静态标签好用
58             
59               ///用live方法才好用,用live时，方法体中可以直接写 this和 $(this)
60               $('li').live('click', function() {
61                alert($(this).text());///注意，用live还可以这样写，结果是正常的
62                alert("haha");
63                $(this).remove();///用live方法，这都可以，自己删自己 好使.
64               });
65               
66 -->