下面是错误的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. Beta阶段爬取数目预估

    预计于12月29号能进行Beta版本发布. Beta阶段我们的爬取动作应该更有针对性,在爬取期间如若数据处理小组有需求,会优先爬取数据处理小组提供的种子链接.预估在项目展示之前能够爬取的数目: 普通网 ...

  2. 小学四则运算APP 第二次冲刺-第二天

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第二次冲刺阶段时间:11.29~12.09 本次发布的判断题功能界面的设置: activity_panduan_set.xml: < ...

  3. 8-Python3从入门到实战—基础之数据类型（集合-Sets）

    Python从入门到实战系列--目录 集合的定义 集合(set)和字典类似,也是一组key的集合,但不存储value:由于key不能重复,所以,在set中,没有重复的key. 创建一个set,需要提供 ...

  4. org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure The last packet sent succ

    数据库 没有开启  连接失败 org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause ...

  5. vue路由异步组件案例

    最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...

  6. Eclipse使用Maven2的一次环境清理记录

    1. C:\Users\Administrator\.m2\repository\com\yuanchuangyun\[module,yuanchuangyun-*]相关目录全删除.2. D:\wor ...

  7. Enum service under CentOS7

    service --status all systemctl list-unit-files

  8. VC6到VC2010，项目迁移错误

    错误信息: error C2440: “static_cast”: cannot from “BOOL (__thiscall CSelectRect::* )(void)” to “BOOL (__ ...

  9. Linux预处理、编译、汇编、链接和运行的过程（包括一些基本的命令）

    转自Quinn0918的博客 一.预编译 1.将所有的#define删除,并展开所有的宏定义: 2.处理所有的预编译指令,例如:#if,#elif,#else,#endif; 3.处理#include ...

  10. XHTML 簡介

    XTML是可擴展的超文本標記語言. XHTML是比HTML更加嚴謹的HTML語言. 所有的瀏覽器都能識別XHTML. XHTML符合W3C標準,是為了替代HTML的.