如何获取带有 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 "test"。我怎样才能得到点击项目的innerhtml。喜欢在单击 <li><a href="http://example.com">Item 1</a></li> 时提醒答案 "item 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

您可以使用事件委托来达到预期的效果。

将单个事件处理程序绑定到父级，并从 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>

如何获取带有 div id 的 li 的 onclick 事件

how to get onclick event of li with a div id

javascript

yui