Des*_*ams 8 html javascript dom-events
这是我第一次尝试使用Javascript和HTML.我正在尝试将点击事件添加到有序列表中的列表项中,但是我正在做的事情的某些方面是行不通的.有人可以为我阐明这一点吗？
我在my head中创建了一个函数,它应该将指定列表的列表项上的所有单击事件委托给给定的函数,并且在该给定函数中,我尝试使用列表项的文本引发一个简单警报.最终我想做更多,但我只是想让简单的点击事件先工作.
<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>
Coo*_*hal 18
我们这样做吧
<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事件代表http://davidwalsh.name/event-delegate上的这篇文章
另外,下面的链接是我创建的小提琴 http://jsfiddle.net/REtHT/
希望这可以帮助 !
delegate()是一个不推荐使用的jQuery方法,并且在普通的JS中不存在这样的方法.
要在JS中附加一个事件处理程序addEventListener,并且对于旧版本的IE,您也需要这样做attachEvent,这就是为什么它对于跨浏览器事件处理程序来说有点棘手.
onclick,onmouseenter等将在所有的浏览器,但它是考虑一个更好的做法是使用addEventListener/ attachEvent.
此外,您必须在将元素添加到DOM后运行脚本,否则它们不可用.通常的方法是在元素之后插入脚本,或使用DOM ready事件处理程序.
<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>
| 归档时间： |
|
| 查看次数： |
33496 次 |
| 最近记录： |