如何獲取具有div ID的li的onclick事件

Question

如果代碼片段是這樣的：

<div id="test">

<div>
<h3>First section</h3>
 <ul>
  <li><a href="http://example.com">Item 1</a></li>
  <li><a href="http://example.com">Item 2</a></li>
  <li><a href="http://example.com">Item 3</a></li>
 </ul>
</div>

<div>
<h3>Second section</h3>
<ul>
  <li><a href="http://example.com">Item 4</a></li>
  <li><a href="http://example.com">Item 5</a></li>
  <li><a href="http://example.com">Item 6</a></li>
 </ul>
</div>

</div>

我有第一個div的ID“測試”。 我如何獲取被單擊項的innerhtml 。 例如當點擊<li><a href="http://example.com">Item 1</a></li>時，提示答案“項目1”。 我已經嘗試過以下代碼

var ul = document.getElementById("test").getElementsByTagName('ul')[0];
ul.onclick = function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
alert(target.getAttribute("href"));
};

此工作僅適用於第一部分ul。 我需要同樣的情況發生N個 ULS。 什么是最好的方法。 提前致謝。

注意：在我的項目中，我無法使用jquery。 僅支持javascript或YUI

Answer 1

遍歷每個ul並向其添加點擊處理程序

 var uls = document.getElementById("test").getElementsByTagName('ul'); for (var i = 0; i < uls.length; i++) { uls[i].addEventListener('click', clickHandler) } function clickHandler(event) { event = event || window.event; var target = event.target || event.srcElement; alert(target.getAttribute("href")); } 

 <div id="test"> <div> <h3>First section</h3> <ul> <li><a href="http://example.com">Item 1</a></li> <li><a href="http://example.com">Item 2</a></li> <li><a href="http://example.com">Item 3</a></li> </ul> </div> <div> <h3>Second section</h3> <ul> <li><a href="http://example.com">Item 4</a></li> <li><a href="http://example.com">Item 5</a></li> <li><a href="http://example.com">Item 6</a></li> </ul> </div> </div> 

Answer 2

您可以使用事件委托來達到預期的結果。

1. 將單個事件處理程序綁定到父級，然后從event.target獲得子級

 //Get the object of the div#test var testDiv = document.getElementById('test'); //Bind onclick event for the div#test object testDiv.onclick = function(e) { //Prevent the default href action (optional) e.preventDefault(); //Check whether the target element is an Anchor tag if (e.target.nodeName == 'A') { alert(e.target.innerHTML); } } 

 <div id="test"> <div> <h3>First section</h3> <ul> <li><a href="http://example.com">Item 1</a> </li> <li><a href="http://example.com">Item 2</a> </li> <li><a href="http://example.com">Item 3</a> </li> </ul> </div> <div> <h3>Second section</h3> <ul> <li><a href="http://example.com">Item 4</a> </li> <li><a href="http://example.com">Item 5</a> </li> <li><a href="http://example.com">Item 6</a> </li> </ul> </div> </div>