<a href="#">最终调用Javascript函数

How does <a href="#"> ends up invoking Javascript functions?

本文关键字：Javascript 函数 gt 调用 quot# lt href quot      更新时间：2023-09-26

我是一名经验丰富的后端程序员，最近出于无聊决定学习更多关于web开发的知识。

我很难理解<a href="#">最终是如何调用Javascript函数的，或者在这个意义上执行任何操作的。

有人能解释一下吗？

从最好到最坏的三种可能方式：

  1. 毫无疑问，在JavaScript中，addEventListener方法用于附加单击事件处理程序。这就是JQuery和其他库正在做的事情。在过去，我相信IE使用了attachEvent（只是作为旁注）。

  2. 锚标签的onclick属性-onclick="yourEventHandler()"。

  3. href="javascript: func();"

在客户端代码的其他地方，一个javascript事件处理程序被绑定到锚点（a）元素的点击事件。它是在一个单独的文件（或script块）中完成的，作为一种分离关注点的方式——保持结构（HTML）、布局（CSS）和逻辑（Javascript）相互独立。

href="#"有点像NOOP，告诉浏览器不要加载不同的页面，并且是在没有分配javascript处理程序的情况下（即，如果客户端不支持javascript）的权宜之计。

让我们像这样分解它。

您首先给href元素一个ID。

<a href="#" id="myID">My Link</a>

现在，这个元素可以被唯一地识别。

访问该元素上事件的JavaScript如下所示：

// first get the element by id
var myLink = document.getElementById("myID");
// add an event listener to listen for clicks
myLink.addEventListener('click', function(e) {
      alert(e.target.id);
      // prevent the element from invoking its default event,
      // which, in this case would be appending an '#' to the URL
      e.preventDefault();

}, false);

以下是

的示例

在这种情况下，a元素很可能具有引用JavaScript函数的onclick属性，例如

 <a onclick="my function()" href="#">Click me</a>
相关文章：