js中事件绑定要注意的事项之如何在方法中自己打印自己的值
下面是错误的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中事件绑定要注意的事项之如何在方法中自己打印自己的值的更多相关文章
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JS基础——事件绑定
上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
- jq中事件绑定的方法
在唯品会实习生面试中,被面试官问了这么一个问题,“jQuery中绑定事件的方法有几个?”,以click事件为例,我当时想到的只有.click(),.bind(),.on()这三种,然后面试官又追问,“ ...
- JS中事件绑定函数，事件捕获，事件冒泡
1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...
- JS中事件绑定问题
今天编写代码时遇到一个问题,我的判断语句(IFLESE)老是顺序执行结束后又跳到中间的语句里去执行了,找了半天没发现问题,最后才发现是事件绑定闹得鬼,不多说,先上代码为敬. JSP里 <butt ...
- JS的事件绑定、事件流模型
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...
- 深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...
- JavaScript中事件绑定的三种方式
JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...
随机推荐
- 关于在VB.NET中调用使用VC++编写的类库dll的一点笔记
前言 结对作业要求一出来,我就立刻想到了把“计算核心”封装成dll,然后使用vb.net编写UI调用dll的思路.然而在实现过程中却遇到了很多的问题. 我在这个过程中是负责使用vb.net编写UI并调 ...
- LINUX内核分析第七周学习总结——可执行程序的装载
LINUX内核分析第六周学习总结——进程的描述和进程的创建 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163.com/cours ...
- Beta版发布说明
我们的作品“校友聊”软件的最终版本于6月19日最终发布了,下面我们将对自己的产品进行介绍. 在使用之前,首先要进行用户注册,用户可以自行设置自己的账号,姓名,密码,签名,头像等信息,头像信息也可以在文 ...
- Cocos2d-x项目创建方式
刚接触cocos2d-x的时候,还只有2.x版本,尝试着将cocos2d-x项目创建功能加入到vs里面去,后来,引擎用Python封装好了好多个脚本文件,其中就包括create_project.py文 ...
- shiro课程的学习
1.shiro的课程目标 (1)shiro的整体框架 各组件的概念 (2)shiro 认证 授权的过程 (3)shiro自定义的Reaml Filter (4)shiro session 管理 (5) ...
- java中for循环的几种方式
比如定义一个数组int a[]={1, 2, 3, 4},下面我们罗列一下遍历这个数组的方法 1 for(;;) 这也是最常用的方法,不多做解释.代码如下 int a[] = {1, 2, 3, 4} ...
- sqlalchemy 使用pymysql连接mysql 1366错误
一.错误情况 mysql 5.7.2 \python35\lib\site-packages\pymysql\cursors.py:166: Warning: (1366, "Incorre ...
- asp.net core 2.0中的配置（1）---Configuration
配置就是一个装配数据字典的过程,一个字典也就是一个键值对,所以从配置就是键值对. 在asp.net core中关于配置是由四个基本的类型来支撑的,是①IConfigurationSource②ICon ...
- Oracle11.2.0.1 升级Oracle11.2.0.4 后 listener 的端口改变需要处理
1. 因为Oracle采取了异地升级 发现 Oracle的端口号发生了变化: 2. 如果之前的连接还需要用的话 需要禁用 dbhome1 里面的监听 只打开dbhome2的监听 并且修改 监听的端口号 ...
- elk认证模块x-pack安装
一.elasticsearch安装x-pack elasticsearch/bin/elasticsearch-plugin install x-pack ######## -> Downloa ...