这是我第一次尝试将 Javascript 与 HTML 结合使用。我正在尝试将点击事件添加到有序列表中的列表项中，但我的操作方式有些问题不起作用。有人可以帮我解释一下吗？
我在我的 head 中创建了一个函数，该函数应该将指定列表的列表项上的所有点击事件委托(delegate)给给定函数，并且在该给定函数中我尝试使用列表项的文本。最终我想做更多，但我只是想先让简单的点击事件起作用。
<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>
最佳答案
让我们做这样的事情
<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>
现在为此编写 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>
请参阅这篇关于 Javascript 事件委托(delegate)的文章 http://davidwalsh.name/event-delegate
此外，下面的链接是我创建的 fiddle http://jsfiddle.net/REtHT/
希望对您有所帮助!
关于javascript - 无法将点击事件添加到列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17636043/