将 JavaScript 'this' 设置为单击时的元素

Question

我正在寻找一种类似于 jQuery 的 .attr() 方法的方法，当我单击一个元素（在本例中为 li 标签）时，我可以获得标签属性。

所以我的问题是，如何创建一个函数，当单击 li 时，函数中的 this 变量等于该 DOM 元素。我试图在不使用 jQuery 的情况下做到这一点。

这是我所拥有的，我认为会起作用，但它不起作用：

function selected(){
    this.title = this.getAttribute("title");
}

假设有一个元素 li 带有属性 title 和一个 onclick 带有函数 selected() 作为选项。

Answer 1

在 JavaScript 中，this 的值因调用函数的方式而异。基本上有3种调用模式：

• 使用 new 运算符，例如new Foo()。在这种情况下，当 Foo 正在执行时，this 指的是正在创建的新对象。
• 取消引用对象上的方法，例如foo.bar()。在这种情况下，当bar 正在执行时，this 指的是foo。当一个方法没有从另一个对象取消引用时，例如当只是调用一个全局方法时，this 指的是全局范围或全局对象。
• 使用 apply 或 call 例如foo.apply(bar)。通过使用 call 或 apply，您可以告诉解释器 this 在调用期间应该引用什么。
• 作为一种特殊情况，this 指的是事件处理程序的节点。

在您的情况下，如果您有一个名为 selected 的全局函数，该函数是从如下事件处理程序调用的：

<li onclick="selected()">

然后在调用selected 期间，因为它没有从任何地方取消引用，this 将引用全局对象。如果您希望this 引用其事件处理程序正在触发的对象，那么您需要使用call 或apply 模式调用selected，并将值this（将引用节点）传递到作为上下文参数。

<li onclick="selected.call(this)">

我通常尽量避免使用 call 或 apply，因为通过查看 this 所指的函数并不明显。因此，在这种情况下，我建议将节点作为参数传入。

<script>
    ...
    function selected(node) {
       node.title = node.getAttribute('title');
    }
</script>
...
<li onclick="selected(this)">

话虽如此，您的 selected 函数的实现并没有多大意义，因为它本质上是一个空操作（在许多情况下）。

Answer 2

这是一个令人困惑的问题，但类似于：

$this = event.target;
$this.title = $this.getAttribute("title") || $this['title'];

可能有效，但请检查 this 是否引用了该元素。

Answer 3

我可以建议以下几点：

document.onclick = function(e){
    if (e.target.tagName.toLowerCase() == 'li'){
        alert(e.target.title);
    }
};

JS Fiddle demo.

Answer 4

<script>
    function itemSelected(listItem)
    {
        // listItem is your HTMLLIElement
        alert(listItem.title);
    }
</script>
<ul>
    <li title="test1" onclick="itemSelected(this);">Test 1</li>
    <li title="test2" onclick="itemSelected(this);">Test 2</li>
</ul>

Answer 5

如果您内联分配 onclick（在 html 内），那么您需要像这样处理它。

HTML

<li onclick="selected(this)">Click Me</li>

Javascript

function selected(element){
    alert(element.title);
}

---

如果您从 JavaScript 分配 onclick，那么这将起作用：

HTML

<li id="myli">Click Me</li>

Javascript

function selected(){
    alert(this.title);
}
document.getElementById("myli").onclick = selected;