下面是错误的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. centos下部署redis服务环境及其配置说明

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作由VMware主 ...

  2. [Android]记录一次处理app:transformDexArchiveWithExternalLibsDexMergerForDebug错误

    第一种情况: Android 目录结构如下: app中build.gradle包含: implementation 'com.squareup.okhttp3:okhttp:3.6.0' implem ...

  3. 先埋锅-CF-Valid BFS?-差一点没交上

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...

  4. ajax跨域请求数据

    最近开始接触ajax的跨域请求问题,相比网上说的一大堆,我这里就说得比较浅显了. 关于为什么要跨域这个问题,实际的需求是当网站项目部署在一个域名上的时候,分域可以很好地解决网站卡顿问题(拥有多台服务器 ...

  5. MySQL存储和获取数据

    ---恢复内容开始--- 一.MySQL存储引擎? 1.引擎定义 存储引擎其实就是如何存取数据,如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系型数据苦中数据是以表格的形式,所 ...

  6. 量产救U盘

    同事U盘不能格式化,快速格式化失败,非快速格式化也失败.就问谁有360安全软件,试试能不能格式化. 我说我有火绒,但是不知道火绒并没有格式化U盘的功能(应该没有吧,反正我找了以后没找到) 那怎么办呢? ...

  7. Activiti中子流程：SubProcess，CallActiviti的区别

    子流程:SubProcess,CallActiviti的区别 https://community.alfresco.com/thread/221771-call-activiti-vs-subproc ...

  8. Linux运维工程师必须掌握的基础技能有哪些？

    这个问题挺好的,回答这个问题也是对自身的审查,看看自己还欠缺哪些.(所以我估计得好好思考下,也许下一刻我就会突然惊醒,发现我还是战⑤渣) 首先限定在Linux运维工程师上 回答仅代表我想到,不代表我都 ...

  9. ubuntu美化 mac风格

    安装tweak sudo apt install gnome-tweak-tool sudo apt install chrome-gnome-shell https://extensions.gno ...

  10. JavaScript 隐式类型转换

    JavaScript 隐式类型转换 原文:https://blog.csdn.net/itcast_cn/article/details/82887895 · 1.1 隐式转换介绍 · 1.2 隐式转 ...