Javascript 当用户从ul元素中选择项目时，如何启动功能？

我有以下Html代码：

<ul id="cultureMenu" class="top-links list-inline" onselect="">
    <li>
        <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src=@flag width="16" height="11" alt="lang" />@Resources.Resources.Language</a>
        <ul class="dropdown-langs dropdown-menu">
            <li><a value="he" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />Norsk</a></li>
            <li class="divider"></li>
            <li><a value="en" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li>
            <li><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> Deutsch</a></li>
            <li><a value="ru" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/ru.png" width="16" height="11" alt="lang" /> Русский </a></li>
        </ul>
    </li>
</ul>

但我需要在纯JavaScript上实现它

---

如何在纯Javascript中实现上述逻辑？

为了快速解决问题，您可以在每个元素上使用onclick，请记住，对于大量元素，这不是一个可维护的选项，您应该单独创建处理程序

<ul id="cultureMenu" class="top-links list-inline" onselect="">
<li>
    <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src=@flag width="16" height="11" alt="lang" />@Resources.Resources.Language</a>
    <ul class="dropdown-langs dropdown-menu">
        <li onclick="yourfunction(this)"><a value="he" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />Norsk</a></li>
        <li class="divider"></li>
        <li onclick="yourfunction(this)"><a value="en" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li>
        <li onclick="yourfunction(this)"><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> Deutsch</a></li>
        <li  onclick="yourfunction(this)"><a value="ru" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/ru.png" width="16" height="11" alt="lang" /> Русский </a></li>
    </ul>
</li>

---

应该为每个

li

DOM元素绑定

click

事件处理程序

您可以使用

querySelectorAll

从无序

列表中查找所有
li
元素


var lis=document.queryselectoral（'cultureMenu ul li'）；
对于（i=0；iadd onclick to the element in the Html通常，当你开始学习一种编程语言时，你是从基础开始的，而不是从一个框架开始的。互联网上充满了例子。你累了什么，你有什么错误？建议内联点击处理程序正在倒退。当然，它是不可伸缩的，这只是几个问题的一个快速解决方案元素。如果列表中的元素数是从数据库加载的或更长，请不要包含onclick…谢谢您的帖子。知道如何在yourfunction（）中获取所选li元素的值吗？@Michael，请看一下我的答案。@Michael我已经编辑了答案，试着将其作为参数传递谢谢你的帖子。但是我需要纯javascript。我看到你有jquery的链接library@Michael，这只是一个错误。我不使用它。
<ul id="cultureMenu" class="top-links list-inline" onselect="">
<li>
    <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src=@flag width="16" height="11" alt="lang" />@Resources.Resources.Language</a>
    <ul class="dropdown-langs dropdown-menu">
        <li onclick="yourfunction(this)"><a value="he" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />Norsk</a></li>
        <li class="divider"></li>
        <li onclick="yourfunction(this)"><a value="en" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li>
        <li onclick="yourfunction(this)"><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> Deutsch</a></li>
        <li  onclick="yourfunction(this)"><a value="ru" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/ru.png" width="16" height="11" alt="lang" /> Русский </a></li>
    </ul>
</li>

function yourfunction(item){
   alert(item.querySelector('a').getAttribute('value') + " selected");
}