如何讓李onclick事件有一個div ID

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>