使用内联事件作为属性,我可以使用this
关键字将当前对象传递给函数。我怎么能通过Javascript调用它作为href.
下面的例子清除问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
function foo(ob){
alert(ob.innerText);
}
</script>
</head>
<body>
<a href="#" onclick="foo(this)">On Click Call</a> Works Fine!
<br />
<br />
<a href="javascript:foo(this)">Javascript linked</a> Does not work.
</body>
</html>
Checkout this Demo
一般来说,出于可维护性等原因,避免将JavaScript直接放入href
属性是一个好主意。所以我不推荐这种方法。但是,如果您确实出于某种原因需要走这条路……
通过href
属性调用JavaScript时,this
的值为window
。要获得被单击的元素,一个(有点笨拙的)解决方案是为它分配一个id
属性,您可以使用它来选择它。
<a id="js-linked" href="javascript:foo(document.getElementById('js-linked'));">Javascript linked</a>
如您所见,这有点难以阅读。使用onclick
属性使事情更清晰,更易于维护,因为this
被分配了所单击元素的值。并且完全避免内联JS并在独立的代码中附加click
侦听器可能会使事情更干净,更易于维护。通常最好使用不引人注目的Javascript原则,根本不要将事件处理程序放在HTML中。
当您使用.addEventListener()
来安装事件处理程序时,this
的值将自动为您设置为引起事件的对象。
这是如何工作的:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a href="#" id="call">On Click Call</a> Works Fine!
<script>
document.getElementById("call").addEventListener("click", function(e) {
e.preventDefault();
alert(this.textContent);
});
</script>
</body>
</html>
更改:
- 将
<script>
标签移动到内容之后,这样脚本运行时DOM元素就已经加载了。 - 为目标链接添加唯一的id值
- 使用
document.getElementById()
获取目标链接对象 - 将事件处理程序从HTML移到脚本中,并使用
.addEventListener()
添加事件处理程序。 - 使用
this
来引用事件处理程序中被点击的链接。
在javascript:foo(this)
中this
指的是Window对象。当使用javascript伪协议时,您没有对所单击元素的引用,因此它将不起作用。