“this”在 HTML 锚点中指的是什么

Question

在点击链接的href 部分中的链接之前，我正在尝试用 JavaScript 做一些事情：

<a href="open.this.page" onclick="doStuff(this);return false; title="follow me">

问题是this 中的doSuff(this) 指的是什么？我原以为必须将锚的 href 部分从中取出，但在检查时它看起来就像是 href ，仅此而已。

function doSutff(my_arg) {
   alert (my_arg);
   // do stuff
   // follow the href in the link
}

在上述警报中，我得到的 href 与 "http://my.domain/open.this.page" 完全相同。

这是预期的还是我在一个浏览器中得到它，但可能不是在另一个浏览器中？

如果这是正常行为，那么如何获得例如锚点的rel 或title 部分？仅 DOM？

Answer 1

在这种情况下，this 指的是 DOM 节点。

Answer 2

“在上述警报中，我得到的 href 与 "http://my.domain/open.this.page" 完全相同。

这是预期的还是我在一个浏览器中得到它，但在另一个浏览器中可能没有？”

这是意料之中的。您在警报中收到 "http://my.domain/open.this.page" 的原因是 .toString() 的默认值是 <a> 元素的值。

这是一个不寻常的案例。其他元素不会将属性显示为 .toString() 表示形式。

如果您想实际使用href，则需要使用this.toString()，或见下文...

---

"...如何获得例如锚点的 REL 或 TITLE 部分？"

要获取其他属性或属性，您只需按照通常的方式进行即可。

要获取属性，可以这样做：

onclick="doStuff(this.getAttribute('title')); return false;"

大多数标准属性直接映射到节点上的属性，因此您也可以这样做：

onclick="doStuff(this.title); return false;"

或者因为你在一个内联处理程序中，你实际上可以这样做：

onclick="doStuff(title); return false;"

最后一个起作用的原因是从属性分配的处理程序具有包含元素本身的唯一范围链。这意味着元素上的属性实际上显示为变量。

请注意，这不适用于任何其他类型的事件处理程序。

---

对于this，指的是handler绑定的元素。

属性发生的事情是它基本上成为分配给onclick属性的函数的主体。

所以你最终会得到这样的结果：

elem.onclick = function(event) {
    doStuff(this);return false; // Your onclick attribute value
}

因此您可以看到this 实际上只是在分配给属性的事件处理程序中找到的正常值。

---

还要注意，定义了一个event 参数。这意味着您可以像这样更改您的属性：

onclick="doStuff(this, event);return false;"

...它将传递该参数，因为现在您的函数如下所示：

elem.onclick = function(event) {
    doStuff(this, event);return false; // Your onclick attribute value
}

所以你可以看到你的字符串实际上引用了函数的普通event参数。

---

这也适用于旧版 IE。在 IE 中，event 参数不会被定义，所以它会选择全局的event 对象。

      // ---------------v----no parameter
elem.onclick = function() {

                //   v---now it picks up the global event
    doStuff(this, event);return false; // Your onclick attribute value
}

Answer 3

this 在任何事件（onclick 或其他）上下文中指的是触发事件的 DOM 元素。

在您的情况下，它是锚标记本身。