js-- 事件委托笔记
//事件绑定
functionMyAddEvent(obj,sEvent,fn){
if(obj.attachEvent){
obj.attachEvent("on"+sEvent,fn);
}else{
obj.addEventListener(sEvent,fn,false);
};
};
//事件解除绑定
functionremoveMyAddEvent(obj,sEvent,fn){
if(obj.detachEvent){
obj.detachEvent("on"+sEvent,fn);
}else{
obj.removeEventListener(sEvent,fn,false);
};
};
|
1
2
3
4
5
6
|
<input type="button"value="添加"id="input1"/>
<ul id="ul1"style="cursor:pointer;">
<li>10000</li>
<li>20000</li>
<li>30000</li>
</ul>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//鼠标滑过li的状态
functionmouseRun(e,Active){
varev=e||window.event;//事件对象
vartarget=ev.target||ev.srcElement;//事件源
var$li=target.nodeName.toLowerCase();//事件源的名字
if($li==="li"&&Active===1){
target.style.background="Red";
};
if($li==="li"&&Active===0){
target.style.background="";
};
};
|
|
1
2
3
|
//鼠标移入、移出的效果。这样写方便可以解除绑定
functionover(e){mouseRun(e,1);};
functionout(e){mouseRun(e,0);};
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//添加的li函数
functionaddLi(sTarget,Now){
varli=document.createElement("li");
li.innerHTML=Now*10000;
sTarget.appendChild(li);
};
window.onload=function(){
varul=document.getElementById("ul1");
varoInput=document.getElementById("input1");
varNow=3;
//绑定元素事件
MyAddEvent(ul,"mouseover",over);
MyAddEvent(ul,"mouseout",out);
MyAddEvent(oInput,"click",function(){
Now+=1;
addLi(ul,Now)
});
};
window.onunload=function(){
//解除绑定
varul=document.getElementById("ul1");
removeMyAddEvent(ul,"mouseover",over);
removeMyAddEvent(ul,"mouseout",out);
};
|
