href="xxx(this);"和onclick="xxx(this);

对于href=”Javascript:xxx(this);”和onclick=”javascript:xxx(this);”之前一直以为这两种写法是等同的，今天后台一个同事在项目遇到这个问题中问我时才发现前者的this根本拿不到触发事件的A标签，而后者可以拿到。

问题由来：

她原来的写法是这样的：

1
2
3
4
5
6
7
8
9
10
11
jsp页面:
<table>
<td><a href="javascript:delete_cur(this)">删除</a></td>
</table>

javascript:
function delete_cur(arg){
  console.log(arg) # window
  $(arg).parent().parent().remove()
  #....
}

需求就是删除当前这一行：结果发现删不掉。代码没有任何报错；于是控制台打印出argument
为什么是window?后来一想href等同于js中window.location.href，恰好是属于window对象。被调用的函数被当成是一个地址，this只能指向顶层window对象。
改为这个为什么就可以了：

1
2
3
<table>
<td><a onclick="javascript:delete_cur(this)">删除</a></td>
</table>

img

事实上当onclick=”javascript:delete_cur(this)”执行的时候，浏览器解释器会给它自动包装成一个匿名函数，也就是:

1
2
3
4
document.getElmentsByClassName("a")[0].onclick = function(){
  console.log(this) # 此时为当前a标签
  delete_cur(this)
}

看似简单，但却很有深意，有了新的一些认识。