javascript事件委托，事件代理，元素绑定多个事件之练习篇

<ul id="parent-list">
<li id="post-1">item1</li>
<li id="post-2">item2</li>
<li id="post-3">item3</li>
<li id="post-4">item4</li>
<li id="post-5">item5</li>
<li id="post-6">item6</li>
</ul>
<script>
var nav = document.getElementById("parent-list");
var li = nav.getElementsByTagName("li");
//方法一
/*var len = li.length;
for(var i=0;i<len;i++){
li[i].index = i;
li[i].onclick = function(e){
alert(this.index+" & "+this.innerHTML+" & " +e.target.id+ " & " +e.target.tagName);
}
}*/
//方法二
/*nav.onclick = function(){
var e = arguments[0] || window.event,
target = e.srcElement ? e.srcElement : e.target;
alert(target.innerHTML);
}*/
//获取指定属性名的属性值
/*var len = li.length;
for(var i=0;i<len;i++){
//alert(li[i].getAttribute("id"));
li[i].onclick = function(){
alert(this.getAttribute("id"));
}
}*/
// 获取父节点，并为它添加一个click事件
document.getElementById("parent-list").addEventListener("click",function(e){
// 检查事件源e.targe是否为Li
if(e.target && e.target.nodeName =="LI"){
console.log("List item",e.target.id,"was clicked!");
}
},false)
</script>

<ul id="myLinks">
<li id="goSomewhere">go somewhere</li>
<li id="doSomething">do something</li>
<li id="sayHi">say hi</li>
</ul>
<script>
//方法一，传统做法
/*var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1,"click",function(e){
location.href = "http://www.baidu.com";
});
EventUtil.addHandler(item2,"click",function(e){
document.title = "I changed the title";
});
EventUtil.addHandler(item3,"click",function(e){
alert("say hi");
});*/
//方法二，事件委托
var nav = document.getElementById("myLinks");
nav.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
//获取每个LI元素的内容
//http://www.2cto.com/kf/201304/204581.html
//http://www.cnblogs.com/rubylouvre/archive/2009/08/09/1542174.html
/*if(target.tagName == "LI"){
alert(target.innerHTML);
}*/
//事件委托
switch(target.id){
case "goSomewhere":
location.href = "http://www.baidu.com";
break;
case "doSomething":
document.title = "I changed the title";
break;
case "sayHi":
alert("say hi");
break;
}
}
</script>

<div id="evt">绑定多个事件</div>
<script>
var item = document.getElementById("evt");
item.addEventListener("click",function(){
alert("first");
},false);
item.addEventListener("click",function(){
alert("second");
},false);
</script>

巴特西

javascript事件委托，事件代理，元素绑定多个事件之练习篇

最新文章

热门文章