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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <script type="text/javascript" src="js/jquery-1.8.0.js"></script>

     <body>

         <!-- 下面是用纯动态方式生成标签 -->

         <div id="d2">

             动态生成a标签

         </div>

         <div id="d3">

             <input type="button" value="生成a标签" id="btn"/>

         </div>

     </body>

     <script>

         ///错误的写法：

         var i = 0;

         $(function() {

             ///点击按钮，给d2动态添加标签

             $('#btn').bind('click', function() {

                 /* 在添加标签的同时给添加的标签绑定点击事件 */

                 $("<li onclick='show()' num='"+(++i)+"'>Hello</li>").appendTo("#d2");

             });

         })

         function show() {

             alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）

             alert($(this).attr("num"));///打印的是undefined 因为$(this)不能用

             alert("哈哈");

             $(this).remove();//方法无效，不能自己删除自己（页面没有效果）

         }

     </script>

 </html>

下面才是正确的写法：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <script type="text/javascript" src="js/jquery-1.8.0.js"></script>

     <body>

         <!-- 下面是用纯动态方式生成标签 -->

         <div id="d2">

             动态生成a标签

         </div>

         <div id="d3">

             <input type="button" value="生成a标签" id="btn"/>

         </div>

     </body>

     <script>

         ///正确的写法

         var i = 0;

         $(function() {

             ///点击按钮，给d2动态添加标签

             $('#btn').bind('click', function() {

                 /* 在添加标签的同时给添加的标签绑定点击事件 */

                 $("<li onclick='show(this)' num='"+(++i)+"'>Hello</li>").appendTo("#d2");

             });

 ////注意：在标签中的绑定方法中加了个参数 this，代表js元素的dom对象本身【注意：只能用this】会传递到方法体中

         })

 /*在方法定义端，参数中随便加个变量即可，

     如obj或者o或者a等任意变量符号都行，且其不用事先用var定义，可以直接用

         然后在方法体中就可以用obj.value【原生的js对象的属性使用方法】或者$(obj).val()【jq的对象方法】等来操作dom本身了

 */

         function show(obj) {

             alert($(obj).text());///这样会政策打印出方法的text即这里的Hello

             alert($(obj).attr("num"));///打印属性也没问题

             alert("哈哈");

             $(obj).remove();//自己删除自己也是好用的

         }

     </script>

 </html

 <!--

     正确的绑定方法和原来错误的方法只有一点小区别，即：

     1.在html标签中，绑定方法的时候，方法中加上一个参数 this【只能是this，不能用其他变量】

     2.在方法的定义位置，方法的参数中用任意一个变量来接收页面上传递过来的this（即调用当前方法的原生js的dom对象）

     3.在方法体中就可以用2中定义的 变量.js原生属性  或者 $(变量).val()等jq封装后的方法来对调用者dom本身进行各种操作了。

     当然，如果标签不是拼接时绑定的方法，而是后来动态绑定的，那么可以用live 方法达到同样的效果

     【注意：只能用live方法给动态标签绑定事件，在事件中才可以操作标签本身，如果用bind方法是不能操作标签本身相关的】

         eg:

             ///bind方法对于动态添加的标签不好使，其只对已经存在的静态标签好用

               ///用live方法才好用,用live时，方法体中可以直接写 this和 $(this)

               $('li').live('click', function() {

                alert($(this).text());///注意，用live还可以这样写，结果是正常的

                alert("haha");

                $(this).remove();///用live方法，这都可以，自己删自己 好使.

               });

 -->

js中事件绑定要注意的事项之如何在方法中自己打印自己的值的更多相关文章

  1. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  2. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  3. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  4. jq中事件绑定的方法

    在唯品会实习生面试中,被面试官问了这么一个问题,“jQuery中绑定事件的方法有几个?”,以click事件为例,我当时想到的只有.click(),.bind(),.on()这三种,然后面试官又追问,“ ...

  5. JS中事件绑定函数，事件捕获，事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  6. JS中事件绑定问题

    今天编写代码时遇到一个问题,我的判断语句(IFLESE)老是顺序执行结束后又跳到中间的语句里去执行了,找了半天没发现问题,最后才发现是事件绑定闹得鬼,不多说,先上代码为敬. JSP里 <butt ...

  7. JS的事件绑定、事件流模型

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...

  8. 深入理解JS的事件绑定、事件流模型

     一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...

  9. JavaScript中事件绑定的三种方式

    JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...

随机推荐

  1. L2-027. 名人堂与代金券

    链接:名人堂与代金券 在比赛中这题只得了2分,赛后发现原来strcmp函数并不是只返回-1,0,1三种,而是返回正数负数0 但是在我的电脑上一般就是返回前三种,只是用后面的三种更稳妥点 都怪我基础不扎 ...

  2. 四则运算C语言程序

    #include<stdio.h> #include<Windows.h> #include<time.h> void main() { int a, b, c, ...

  3. 个人项目Week1

    一.项目时间规划与实际用时 PSP2.1 Personal Software Process Stages 预计时间/h 实际时间/h Planning 计划     · Estimate · 估计这 ...

  4. linux内核分析第五次实验

    给MenuOS增加time和time-asm命令 上周是从用户态的观点来理解系统调用,这周从内核态出发研究系统调用,通过跟踪调试,首先把上周的两个命令加到MenuOS中: rm menu -rf 强制 ...

  5. Linux内核分析-系统中断在内核中的实现

    分析system_call中断处理过程 在MenuOS中添加上周所运用到的系统调用 即在Linuxkernel/menu/test.c文件中,添加代码如下: int Mkdir() { const c ...

  6. oracle alter

    ALTER TABLE (表名) ADD CONSTRAINT (索引名);ALTER TABLE (表名) DROP CONSTRAINT (索引名); ALTER TABLE (表名) ADD ( ...

  7. JSONObject使用方法详解

    1.JSONObject介绍 JSONObject-lib包是一个beans,collections,maps,java arrays和xml和JSON互相转换的包. 2.下载jar包 http:// ...

  8. Windows 7 64位安装cURL

    安装cURL. 1, 下载64位的SSL版cURL,网址: http://curl.download.nextag.com/download/curl-7.21.7-win64-ssl-sspi.zi ...

  9. Tomcat7/8访问Server Status、Manager App、Host Manager出现403 forbidden

    在配置好Tomcat7/8后,我们往往需要访问Tomcat7/8的Manager以及Host Manager.就需要在tomcat-users.xml中配置用户角色来实现.在地址栏输入:localho ...

  10. selenium之批量执行测试用例生成HTML结果文件

    使用HTMLTestRunner运行测试套件,自动生成html测试报告: import unittest, HTMLTestRunner, sendmail_html import time, os ...