行间事件传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的时候把事件写在外面,本文中第二种写法。