行间事件传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 默认会传选中项标识的参数,在传参处不用定义,在方法 ...
随机推荐
- Docker理解与使用（转）
2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业. 但是,许多人并不清楚 Docker 到底是什么,要解决什么问题,好处又在哪里?本文就来详细解释,帮助大家理解它,还带有简单 ...
- Phone List POJ 3630 Trie Tree 字典树
Phone List Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 29416 Accepted: 8774 Descr ...
- POJ 1984
我做过的最棘手的一道题了,不是因为难,难就是不懂,而是因为明明思路对了,却调了很久程序没发现自己哪错了.....就连样例都不过 操,别人的代码::::::::::::::::::::::::::::. ...
- Cocos Code IDE里xcodeprojectlua脚本更新
lua脚本改动后xcode须要clean又一次编译才干更新,这个是xcode里的老毛病了,网上有一些脚本但不是针对Cocos Code IDE的project文件夹的,这里列出 cocos2dx版本号 ...
- 2015多校联合训练赛 hdu 5308 I Wanna Become A 24-Point Master 2015 Multi-University Training Contest 2 构造题
I Wanna Become A 24-Point Master Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 ...
- 11153 kill boss
11153 kill boss 时间限制:1000MS 内存限制:65535K提交次数:1090 通过次数:340 题型: 编程题 语言: G++;GCC Description Acmer最近 ...
- Kinect for Windows SDK v2.0 开发笔记 (十五) 手势帧
(转载请注明出处) 使用SDK: Kinect for Windows SDK v2.0 public preview1409 同前面,由于SDK未完毕,不附上函数/方法/接口的超链接. 这次最 ...
- ArcGIS Python实现Modis NDVI批量化月最大合成
最大合成法(MVC)能够在Envi中的Band Math中进行,式子是B1>B2,可是无法批量化.本文实如今ArcGIS中利用Python代码批量进行,例如以下: 用到的Modis NDVI数据 ...
- Tomcat启动时项目反复载入，导致资源初始化两次的问题
近期在项目开发測试的时候,发现Tomcat启动时项目反复载入,导致资源初始化两次的问题 导致该问题的解决办法: 例如以下图:在Eclipse中将Server Locations设置为"Us ...
- ubuntu下安装AndroidStudio
近期将电脑的操作系统换成了ubuntu,对于不习惯win8/win10的人来说ubuntu确实是一个不错的选择,主要的软件都ok了,至于QQ什么的,大家能够去找wine版的,或者直接下载一个叫Cros ...