如何让李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>