如何最终调用Javascript函数？

I am an experienced backend programmer who recently decided to learn more about web development out of boredom.

我是一位经验丰富的后端程序员,他最近决定从厌倦中学习更多有关Web开发的知识。

I am having trouble with understanding how <a href="#"> ends up invoking a Javascript function, or performing any action in that sense.

我无法理解最终如何调用Javascript函数或执行任何操作。

Can someone shed some light on this?

有人可以对此有所了解吗?

4 个解决方案

#1

Three possible ways in order of best to worst:

三种可能的方式,从最好到最差:

Unobtrusively - in JavaScript the addEventListener method is used to attach a click event handler. This is what JQuery and other libraries are doing under the covers. In the past I believe IE used attachEvent instead (just as a side note).

不引人注意 - 在JavaScript中,addEventListener方法用于附加单击事件处理程序。这就是JQuery和其他库在幕后所做的事情。在过去,我认为IE使用了attachEvent(仅作为旁注)。
onclick attribute of the anchor tag - onclick="yourEventHandler()".

锚标记的onclick属性 - onclick =“yourEventHandler()”。
href="javascript: func();"

#2

Somewhere else in the client-side code, a javascript event handler was bound to the click event of the anchor (A) element. It's done in a separate file (or in a script block) as a way to separate concerns -- keeping structure (HTML), layout (CSS), and logic (Javascript) independent of each other.

在客户端代码的其他地方,javascript事件处理程序绑定到anchor(A)元素的click事件。它在一个单独的文件(或脚本块)中完成,作为分离关注点的一种方式 - 保持结构(HTML),布局(CSS)和逻辑(Javascript)彼此独立。

The href="#" is a bit of a NOOP, telling the browser to not load a different page, and is a stopgap measure in case the javascript handler didn't get assigned (I.e. if the client doesn't support javascript).

href =“#”是一个NOOP,告诉浏览器不加载不同的页面,并且是一个权宜之计,以防javascript处理程序没有被分配(即如果客户端不支持javascript)。

#3

Lets break it down like this.

让我们这样打破它。

You first give your href element an ID.

首先给你的href元素一个ID。

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

我的链接

Now this element can be uniquely identified.

现在可以唯一地识别该元素。

The JavaScript to access events on that element would look like this:

访问该元素上的事件的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);

Here is an example

这是一个例子

#4

Most likely in a case like this a element has onclick attribute that references a JavaScript function e.g.

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

 <a onclick="my function()" href="#">Click me</a>

#1