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

时间:2012-12-12 15:19:56

标签: javascript html anchor this

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

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

问题是thisdoSuff(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"

这是预期的还是我在一个浏览器中获取它,但可能不在另一个浏览器中?

如果这是正常行为,那么如何获得,例如,锚点的reltitle部分?只有DOM?

3 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:3)

任何事件(onclick或其他)的上下文中的

this指的是触发事件的DOM元素。

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

答案 2 :(得分: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
}