行间事件传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 默认会传选中项标识的参数,在传参处不用定义,在方法 ...
随机推荐
- 在LINUX系统上通过LINUX命令安装mysql数据库和JDK环境
此示例通过Winscp工具和Xshell已验证通过 安装示例1: 在Centos6.5上安装JDK-10.0.2版本 检查LINUX系统是否有自带或者安装过的JDK版本:Java -version 查 ...
- 09.正则表达式re-1.正则表达式
1.正则表达式概述 正则表达式(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的一个概念. 正则表达式使用单个字符串来描述.匹配一系列匹配某 ...
- Windows 2003 IIS 不支持ASP的问题
Windows 2003 IIS 不支持ASP的问题 问题: HTTP 错误 404 - 文件或目录未找到. Internet 信息服务 (IIS) 第一步,启用Asp,进入:控制面板 -> 管 ...
- 洛谷 P1131 BZOJ 1060 [ZJOI2007]时态同步
题目描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两个节点 ...
- 2017年JavaScript框架---Top5
前言 个人观点,供您参考 观点源自作者的使用经验和日常研究 排名基于框架的受欢迎度, 语法结构, 易用性等特性 希望大家能够基于此视频找到最适合自己的框架 下面介绍的都是严格的前端框架和库 前言 To ...
- 全栈JavaScript之路（ 二十 ）HTML5 插入 html标记 （ 二 ）insertAdjacentHTML
insertAdjacentHTML(), 这种方法也是在IE中最早出现的.如今已纳入html5规范,它接受两个參数,一个是下列的标记之中的一个,一个是要写入的 html 代码文本. beforeb ...
- 原型设计模式prototype-构造js自己定义对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 基于ZF中的.htaccess文件学习Apache的Rewrite语法
首先我们看一下这个.htaccess文件: RewriteEngine On RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST ...
- luogu2014 选课 背包类树形DP
题目大意:有N门功课,每门课有个学分,每门课有一门或没有直接先修课(若课程a是课程b的先修课即只有学完了课程a,才能学习课程b).一个学生要从这些课程里选择M门课程学习,问他能获得的最大学分是多少? ...
- Linux - 配置php-fpm 以及 配置nginx支持php
配置php-fpm [root@localhost php7]# which php-fpm /usr/local/php7/sbin/php-fpm [root@localhost php7]# p ...