Javascript 无法将单击事件添加到列表项_Javascript_Html_Dom Events

Javascript 无法将单击事件添加到列表项

javascript html

Javascript 无法将单击事件添加到列表项,javascript,html,dom-events,Javascript,Html,Dom Events,这是我第一次尝试将Javascript与HTML结合使用。我试图将单击事件添加到有序列表中的列表项中，但我的操作方式不起作用。有人能帮我解释一下吗我在我的标题中创建了一个函数，该函数应将指定列表的列表项上的所有单击事件委托给给定函数，并在该给定函数中尝试使用列表项的文本发出简单警报。最终我想做更多的事情，但我只是想先让简单的点击事件起作用 <html> <head> <script type="text/javascript">

这是我第一次尝试将Javascript与HTML结合使用。我试图将单击事件添加到有序列表中的列表项中，但我的操作方式不起作用。有人能帮我解释一下吗

我在我的

标题中创建了一个函数，该函数应将指定列表的列表项上的所有单击事件委托给给定函数，并在该给定函数中尝试使用列表项的文本发出简单警报。最终我想做更多的事情，但我只是想先让简单的点击事件起作用
<html>
    <head>
    <script type="text/javascript">
      // Attach an event handler to the 'topfriends' list to handle click events.
      function attachEventHandlerToList() {
          document.getElementById("#top4list").delegate("li", "click", function(clickEvent) {
              alert(this.innerHTML());
          });
        }
    </script>
</head>

<body>

    <div id="topfriends">
        <h3>Top 4 Most Friendable Friends</h3>
        <ol id="top4list" onload="attachEventHandlerToList()">
            <li>Brady</li>
            <li>Graham</li>
            <li>Josh</li>
            <li>Sean</li>
        </ol>
    </div>
</body>


//将事件处理程序附加到“topfriends”列表以处理单击事件。
函数attachEventHandlerToList（）{
document.getElementById（“#top4list”）.delegate（“li”，“click”，函数（clickEvent）{
警报（this.innerHTML（））；
});
}
四大最友好的朋友
布雷迪
格雷厄姆
乔希
肖恩

您好，为什么不用onClick替换onLoad directy来简化操作
<script type="text/javascript">
function olClicked(){
alert(this.innerHTML());
}
</script>
<ol id="top4list" onClick="olClicked()">


函数（）{
警报（this.innerHTML（））；
}
delegate（）
是一种不推荐使用的jQuery方法，普通JS中不存在这种方法。

要在JS中附加事件处理程序，您需要使用addEventListener
，对于旧版本的IE，您也需要attachEvent
，这就是为什么跨浏览器事件处理程序有点棘手的原因。

<代码> OnCase< /COD>，<代码> OnMouthEnter < /代码>等将在所有浏览器中运行，但考虑使用<代码> AdvestTristAuter <代码> >代码>附件事件< /代码>
此外，必须在元素添加到DOM后运行脚本，否则这些元素将不可用。通常的方法是在元素之后插入脚本，或者使用DOM就绪的事件处理程序
<html>
<head>
    <title>test</title>
</head>

<body>

<div id="topfriends">
  <h3>Top 4 Most Friendable Friends</h3>
  <ol id="top4list">
    <li>Brady</li>
    <li>Graham</li>
    <li>Josh</li>
    <li>Sean</li>
  </ol>
</div>

<script type="text/javascript">
    var lis = document.getElementById("top4list").getElementsByTagName('li');

    for (var i=0; i<lis.length; i++) {
        lis[i].addEventListener('click', doStuff, false);
    }

    function doStuff() {
        alert( this.innerHTML );
    }
</script>
</body>


测试
四大最友好的朋友
布雷迪
格雷厄姆
乔希
肖恩
var lis=document.getElementById（“top4list”）.getElementsByTagName（“li”）；
对于（var i=0；i让我们这样做
<ul id="parent-list">
    <li id="a">Item A</li>
    <li id="b">Item B</li>
    <li id="c">Item C</li>
    <li id="d">Item D</li>
    <li id="e">Item E</li>
    <li id="f">Item F</li>
</ul>


项目a
b项
第c项
第d项
项目e
第f项


现在为这个编写javascript
<script type="text/javascript">
    // locate your element and add the Click Event Listener
    document.getElementById("parent-list").addEventListener("click",function(e) {
        // e.target is our targetted element.
                    // try doing console.log(e.target.nodeName), it will result LI
        if(e.target && e.target.nodeName == "LI") {
            console.log(e.target.id + " was clicked");
        }
    });
</script>


//找到元素并添加Click事件侦听器
document.getElementById（“父列表”）.addEventListener（“单击”，函数（e）{
//目标是我们的目标元素。
//尝试执行console.log（e.target.nodeName），结果将是LI
if（e.target&&e.target.nodeName==“LI”）{
log（e.target.id+“被点击”）；
}
});

请参阅这篇关于Javascript事件委托的文章

此外，下面的链接是我创建的小提琴

希望这有帮助！
试试这个。它也可以用于子节点和父节点

var visitorList=document.getElementById（“访问者”）；
visitorList.addEventListener（“单击”，函数（e）{
视觉变异；
if（e.target&&e.target.nodeName==“LI”）{
visitorId=e.target.id；
console.log（e.target.id）；
}
如果（e.target&&e.target.nodeName==“H1”）{
visitorId=e.srcElement.parentElement.id；
log（e.srcmelement.parentElement.id）；
}
//console.log（visitorId）；
})；

访客a
访客b
访客c
访客d
访客e
访客f
我尝试此操作时出现类型错误。“这”显然是窗口，而不是列表项。我使用委托的原因是我需要为每个列表项指定不同的行为。感谢您的建议！我将尝试一下。这确实是我第一次将行为添加到HTML中，因此我甚至不知道任何详细信息另外，我测试它的项目使用JQuery，所以我认为委托（）是方法会很好，但我想我使用它时需要库或其他东西？我对JS也是新手。啊，这也行！我打赌它比为每个列表项分配单独的单击事件更有效，这是我试图通过使用“委托（）来避免的“。但是，等等！我如何获取列表项中的文本？使用e.target.id
获取li
的id，对吗？我最终将生成此列表，并且e.target.innerHTML
不会打印任何内容。无论如何，innerHTML
完全有效。我猜我要么拼写错误，要么没有保存更改。”l、 糟糕！绑定事件处理程序时效率更高，之后每次单击检查目标时，每次有人单击父对象时效率更低。