“this”在HTML锚点中引用了什么

Question

我正在尝试使用JavaScript执行某些操作，然后再按照链接的href部分中的链接进行操作：

<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

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

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

Answer 3

“在上面的警报中，我得到了完整的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 ，它指的是处理程序绑定到的元素。

该属性发生的变化是它基本上成为分配给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
}