获取被点击的li元素的值

Question

首先，我要向ul添加一个事件监听器，如下所示：

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。谢谢:)

- elad.chen

---

即使我考虑了这个问题，我仍然不确定实际实例将如何传递到函数中。 - elad.chen

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 Bin

或者，您可以通过LI进行过滤，并通过firstChild或childNodes[0]访问锚点。

- Nick Tomlin

---

你能解释一下为什么这是“不规范”的吗？ - elad.chen

这种解决方案并不像JavaScript库提供的委托方法那样优雅，可以减轻原生JavaScript解决方案的混乱程度：） - Nick Tomlin

虽然<li>和<a href=...>之间没有空格，但是如果它们之间实际上有任何空格，childNodes[0]将返回一个文本节点，而.children[0]则不会。 - Ian

你不需要 e.target && 这部分。而且，一个人不需要使用库来进行基于选择器的事件委托，尽管对于像这样简单的情况来说，这可能会过度设计。 - user2437417

函数set_ua_value(e) {document.getElementById("action").innerHTML = e.target.innerHTML;}运行良好。有没有不使用它的原因？ - elad.chen

@CrazyTrain 感谢您的编辑。我并不是说您必须为这样的任务使用库，但当这些小任务开始累积时... - Nick Tomlin

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);

- StackSlave

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 BIN

- carlosHT