下面是错误的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. MySQL的启动程序

    1.mysqld:             mysql server [root@test bin]# ./mysqld --user=mysql & [root@test bin]# ps ...

  2. 继承：call、apply、bind方法

    javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. call,apply,bind这 ...

  3. Linux内核分析作业第四周

    系统调用的三个层次 一.用户态.内核态和中断 用户通过库函数与系统调用联系起来. 1.内核态 在高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态 2.用户态: 在低级 ...

  4. 使用docker安装paddlepaddle 和 tensorflow

    1.tensorflow安装 http://blog.csdn.net/freewebsys/article/details/70237003 (1)拉取镜像:docker pull tensorfl ...

  5. pandas重新索引

    #重新索引会更改DataFrame的行标签和列标签.重新索引意味着符合数据以匹配特定轴上的一组给定的标签. #可以通过索引来实现多个操作 - #重新排序现有数据以匹配一组新的标签. #在没有标签数据的 ...

  6. MySQL下载安装详情教程

    1.下载MySQL数据库可以访问官方网站:https://www.mysql.com/ 2.点击DOWNLOADS模块下的Community模块下的MySQL Community Server进行下载 ...

  7. python自动化运维笔记1 —— 系统性能信息模块psutil

    一.系统基础信息模块 1.1 系统性能信息模块psutil psutil是一个跨平台库(http://code.google.com/p/psutil/),能够轻松实现获取系统运行的进程和系统利用率( ...

  8. vue render function & dataset

    vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...

  9. codeforces710B

    Optimal Point on a Line CodeForces - 710B You are given n points on a line with their coordinates xi ...

  10. BZOJ2553[BeiJing2011]禁忌——AC自动机+概率DP+矩阵乘法

    题目描述 Magic Land上的人们总是提起那个传说:他们的祖先John在那个东方岛屿帮助Koishi与其姐姐Satori最终战平.而后,Koishi恢复了读心的能力…… 如今,在John已经成为传 ...