行间事件传this的问题：

在做1个简单功能的时候，行间事件这块发现了1个问题：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body>
<a οnclick="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)为空。很奇怪了，这种写法也经常见：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7
 8 <body>
 9 <a>a标签</a>
10 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
11 <script>
12 $('a').click(function(){
13     var t = $(this).text();
14     console.log(t);
15     alert(t);
16     })
17
18 </script>
19 </body>
20 </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 οnclick="createChild(${map2.id},${map2.parentid},'${map2.url}','${map1.menuname}')" >(修改)</a>。

这时候要在JavaScript要用到this，那么这样即可：

1 <a  onclick="createChild(${map2.id},${map2.parentid},'${map2.url}','${map1.menuname}',this)" >(修改)</a>

不用this的时候把事件写在外面，本文中第二种写法。

转载于:https://www.cnblogs.com/xiaochongchong/p/5446323.html

行间事件传this的问题：相关推荐

JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
【Ant Design Pro 四】react 点击事件传参
简单的绑定点击事件传参: 点击事件 function myClick(){console.log('点击')}return (<Button onClick={myClick}>点击< ...
javascript-行间样式,提取行间事件,while/for,全选/反选/取消,选项卡,innerHTML
行为.样式.结构分离(JS/CSS/HTML) 1.不要加行间样式: 2.不要加行间事件一.行间样式 <!DOCTYPE doctype html> <html lang=&quo ...
vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
【微信小程序】给绑定事件传参数
前言调试基础库 2.12.0 开发者工具 1.03.2008270 给绑定事件传参数使用公共属性data-*给绑定事件传参数使用方式声明事件: Page({tapName: function( ...
click传值vue_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
uni-app的事件传参
uni-app的事件传参,和微信方式类似,需要先定义data-,再在函数中获取 <div @click="handleClick" data-big-dog='大狗子'> ...
微信小程序事件传参
微信小程序事件传参 wxml部分 js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="de ...

行间事件传this的问题：

行间事件传this的问题：相关推荐

最新文章

热门文章