如何传递对象函数调用从javascript作为href

How to pass the object to function call from javascript as href

本文关键字：javascript 作为 href 函数调用 何传递 对象      更新时间：2023-09-26

使用内联事件作为属性，我可以使用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>

更改:

  1. 将<script>标签移动到内容之后，这样脚本运行时DOM元素就已经加载了。
  2. 为目标链接添加唯一的id值
  3. 使用document.getElementById()获取目标链接对象
  4. 将事件处理程序从HTML移到脚本中，并使用.addEventListener()添加事件处理程序。
  5. 使用this来引用事件处理程序中被点击的链接。

在javascript:foo(this)中this指的是Window对象。当使用javascript伪协议时，您没有对所单击元素的引用，因此它将不起作用。

相关文章：