“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
}