行间事件传this的问题：-优快云博客

本文探讨了HTML中行间事件绑定与JavaScript中this关键字的使用差异。通过具体实例对比了不同方式下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)为空。很奇怪了，这种写法也经常见：

 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 onclick="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