Question

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

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

这就是我的想法，我认为它会起作用，但事实并非如此：

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

假设有一个元素li，其中包含属性标题和一个以selected()函数作为选择的onclick。

Answer 1

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

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

可能有效，但请检查这是否正在引用该元素。

Answer 2

如果您在线分配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;

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

在JavaScript中，this的值根据函数的调用方式而有所不同。基本上有3种调用模式：

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

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

<li onclick="selected()">

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

this

我经常试图回避使用调用或 apply ，因为通过查看<li onclick="selected.call(this)">将引用的函数并不明显。因此，在这种情况下，我建议将节点作为参数传递。

this

说到这一切，你的<script> ... function selected(node) { node.title = node.getAttribute('title'); } </script> ... <li onclick="selected(this)">函数的实现并没有多大意义，因为它基本上是一个无操作（在许多情况下）。

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

5 个答案: