行间事件传this的问题:
在做1个简单功能的时候,行间事件这块发现了1个问题:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<a onclick="fn()">a标签</a>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function fn(obj){
var t = $(this).text();
console.log("t:"+t);
}
</script>
</body>
</html>
打印不出来t。事实上,这样做获取不到元素,也就是说$(this)为空。很奇怪了,这种写法也经常见:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<a>a标签</a>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('a').click(function(){
var t = $(this).text();
console.log(t);
alert(t);
}) </script>
</body>
</html>
事实上,这种写法就能获取的到。
那行间事件怎么传this呢?如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<a onclick="fn(this)">a标签</a>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function fn(obj){
var t = $(obj).text();
console.log(t);
alert(t);}
</script>
</body>
</html>
注意,函数的形参不能直接写this,因为this是一个关键字。$(obj)的作用是将原生的dom对象转换成jquery对象。这样可以很方便的进行操作了。
总结:第1种写法有问题,其他两种都可以。有时候事件写在行间方便点,因为动态语言生成页面的时候,传值很方便,除了this,我们还可以传后台的数据,jsp中比如:
<a onclick="createChild(${map2.id},${map2.parentid},'${map2.url}','${map1.menuname}')" >(修改)</a>。
这时候要在JavaScript要用到this,那么这样即可:
<a onclick="createChild(${map2.id},${map2.parentid},'${map2.url}','${map1.menuname}',this)" >(修改)</a>
不用this的时候把事件写在外面,本文中第二种写法。
行间事件传this的问题:的更多相关文章
- P21_事件传参与数据同步
事件绑定 在事件处理函数中为 data 中的数据赋值 通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下: 事件传参 小程序中的事件传参 ...
- 【JS学习笔记】提取行间事件
行间提取事件第一种方法: function 名字() { ... } oBtn.onclick=名字: 第二种方法: oBtn.onclick=function () { ... } 其实在JS当中, ...
- react事件绑定,事件传参,input单向数据绑定
import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...
- wpf 用户自定义事件传参2
public delegate void MenuButtonClickEventHandler(object sender, EventArgs e); public event MenuButto ...
- 微信小程序:bindtap等事件传参
事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...
- 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等
一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...
- wpf 用户自定义事件传参
//自定义传参 ,对外联系的参数 public class ImageZoomChangedEventArgs : RoutedEventArgs { /// <summary> /// ...
- 微信小程序 - bindtap等事件传参
什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...
- Vue 下拉框值变动事件传多个参数
在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...
随机推荐
- open-ldap服务安装(1)
LDAP简介 LDAP 代表 轻量级目录访问协议.在我的理解中ldap就是一个数据库. 在LDAP中,目录条目以分层树状结构排序. 传统上,这种结构反映了地理和组织边界,表示国家/地区的条目显示在树的 ...
- 【ACM】hdu_1004_Let the Balloon Rise
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- 关于Dos窗体的设置
1.输入cmd,点击回车键.出现下图: 2.点击左上角(红框框起来的地方),进行例如以下图操作: 3.选择"属性",出现下图: 4.选择"字体"能够改动字体的大 ...
- mysql配置文件夹错误:在安装mysql 5.6.19 时运行cmake命令是出现CMake Error: The source directory does not appear to contai
在安装mysql 5.5.xx 时运行cmake命令是出现CMake Error: The source directory does not appear to contain CMakeLists ...
- Chrome Extension 的 webRequest模块的解读
Chrome Extension 的 webRequest模块的解读 文档在此:http://developer.chrome.com/trunk/extensions/webRequest.ht ...
- 数据库技术_Orcale技术(0002)_5分钟会用存储过程_存储过程实例
基础技术: 样例业务功能: 1.依据传入的类型A_TYPE联合查询PROCEDURE_TEST_A表.PROCEDURE_TEST_A_SUB表中的数据.并显示主要内容. 2.依据传入的类型A_TYP ...
- ES Segment Memory——本质上就是segment中加到内存的FST数据,因此segment越多,该内存越大
ElasticSearch优化系列四:ES的heap是如何被瓜分掉的 转自:https://www.jianshu.com/p/f41b706db6c7 以下分别解读几个我知道的内存消耗大户: Seg ...
- The Unique MST--hdoj
The Unique MST Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) Tota ...
- linux git保存用户名密码(避免每次push输用户名密码)
Linux/Unix/Mac 系统 新建一个 ~/.netrc 文件, 将 git 服务器, 用户名以及密码记录在这个文件, 如下所示: machine your-git-server log ...
- [C#] override和overload的区别
重载应该叫overload,重写叫override:重载某个方法是在同一个类中发生的!重写是在子类中重写父类中的方法. 1.override: 父类:public virtual string T ...