javascript - 获取点击的 li 元素的值

Question

首先我在ul中添加一个EventListener，如下：

action_list_ul.addEventListener("click", set_ua_value, false);

set_ua_value 工作是：

• 监听对 ul 子元素（li 元素）的每次点击 • 获取点击的 li 内的 a 标签的值（innerHTML？）

<ul id="action-list">
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
</ul>

如果单击 foo，我需要检索“foo”字符串。

由于我对 javascript 相当陌生，我不确定如何获得点击的 li 的实际“this”。

我不想使用 jQuery。谢谢 ：）

Answer 1

一种快速而肮脏的方法是将事件绑定到列表，并通过锚标签进行过滤：

JS

var action_list_ul = document.getElementById('action-list');
action_list_ul.addEventListener("click", set_ua_value, false);

function set_ua_value (e) {
  if(e.target.nodeName == "A") {
       console.log(e.target.innerHTML);
    }

}

JS斌

或者，您可以按 过滤，并通过或LI访问锚点。firstChildchildNodes[0]

Answer 2

使用类似的东西：

var win = window, doc = document, bod = doc.getElementsByTagName('body')[0];
function E(e){
  return doc.getElementById(e);
}
function actionListValue(element, func){
  var cn = element.childNodes;
  for(var i=0,l=cn.length; i<l; i++){
    if(cn[i].nodeType === 1){
      var nc = cn[i].childNodes;
      for(var n=0,c=nc.length; n<c; n++){
        if(nc[n].nodeType === 1){
          nc[n].onclick = function(){
            func(this.innerHTML);
          }
        }
      }
    }
  }

}
actionListValue(E('action-list'), set_ua_value);

Answer 3

这是一个替代方案：

var foo = document.getElementById("foo"); 
foo.addEventListener("click", modifyText);

function modifyText(e) {
    console.log(e.target.innerHTML); 
}

在这种情况下，绑定必须与a元素一起使用。

<ul id="action-list">
    <li><a href="#" id="foo">foo</a></li>
    <li><a href="#" id="bar">bar</a></li>
</ul>

JS斌