將JavaScript'this'設置爲點擊元素

我正在尋找類似於jQuery的.attr()方法的方法，其中當我單擊一個元素（在本例中爲li標記）時，我可以獲取標籤屬性。將JavaScript'this'設置爲點擊元素

所以我的問題是，我怎樣才能使一個函數，當一個li被點擊時，函數中的this變量等於該DOM元素。我試圖做到這一點，而不使用jQuery。

這是我有我的想法會工作，但它並不：

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

假設有一個與屬性標題和功能selected()爲選擇一個onclick元素li。

來源

2011-09-29 comu

如何分配onclick？ –

通過將onlick屬性添加到li來分配。 – comu

@Jonah Aliborne ...看看我的答案，它應該可以幫助你。 –

在JavaScript中，this的值根據函數是如何調用。基本上有三種調用模式：

使用新的運營商，例如， new Foo()。在這種情況下，Foo正在執行this引用正在創建的新對象。
在對象上解引用方法例如foo.bar()。在這種情況下，bar正在執行this是指foo。當一個方法沒有從另一個對象中解除引用時，例如當調用一個全局方法時，this引用全局範圍或全局對象。
使用適用或請致電例如foo.apply(bar)。通過使用請致電或應用您可以告訴解釋器在調用過程中應該引用哪些內容this。
作爲一個有點特殊的例子，this引用事件處理程序的節點。

在你的情況，如果你有一個名爲selected是從事件處理程序調用的全局函數，如下列：

<li onclick="selected()">

的 selected調用期間

然後，因爲它沒有從解除引用任何地方this都會引用全局對象。如果您希望this指向其事件處理程序正在觸發的對象，則需要使用call或apply模式調用selected，並將值this（將引用該節點）作爲上下文參數。

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

我通常會盡量回避使用通話或遠適用，因爲它不是從看什麼this將引用功能明顯。因此，在這種情況下，我會建議傳入節點作爲參數。

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

有了這一切都這樣說，你selected功能的實現不會使一噸的意義，因爲它本質上是一個無操作（在許多情況下）。

來源

2011-09-29 21:30:34

這是一個令人困惑的問題，但這樣的：

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

可能會奏效，但檢查，這是引用的元素。

來源

2011-09-29 21:09:38 Joe

@ Dr.Molle @ IAbstractDownFactor好的讓我澄清一下。當我運行我提供的代碼時，出現錯誤：Object [object DOMWindow]沒有方法'getAttribute'。所以問題是它沒有引用這個元素被點擊。如果你知道jQuery，這與點擊時修改的DOM對象相同。我爲li分配了一個onclick屬性。這可能是問題嗎？ – comu

我的編輯應該適合你 – Joe

如果你在線分配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;

來源

2011-09-29 21:14:36

如果我正確閱讀，OP真的想用'this'。在這種情況下，使用'selected.call（this）'。 – pimvdb

謝謝你的工作 – comu

我建議如下：

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

JS Fiddle demo。

來源

2011-09-29 21:19:33

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

來源

2011-09-29 21:20:31 Terry

將JavaScript'this'設置爲點擊元素

回答

相關問題