设置 JavaScript“this”单击时指向某个元素

Question

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

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

这就是我认为可行但行不通的方法：

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

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

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 /code> 模式并传递值 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 演示。

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;