杭州-小白 web前端 小白 js中事件委托的练习笔记
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//事件绑定
function MyAddEvent(obj,sEvent,fn){
if(obj.attachEvent){
obj.attachEvent(“on”+sEvent,fn);
}else{
obj.addEventListener(sEvent,fn,false);
};
};
//事件解除绑定
function removeMyAddEvent(obj,sEvent,fn){
if(obj.detachEvent){
obj.detachEvent(“on”+sEvent,fn);
}else{
obj.removeEventListener(sEvent,fn,false);
};
};
|
先上主要代码：
事件委托嘛。
主要好处是1.可以提高性能 2.新增加的元素也具有事件。。
例如：
|
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>
|
这个小例子中的li这里给他一个移入的背景，移开背景消失，一般的做法。【主要是妙味视频里面的东西
,加上自己的理解,在没看这个视频之前，我是不知道有这个事件委托这个玩意儿的。原因嘛。我的js基础比较差。。不知道哦。。看了这个视频才知道。。】
那么我之前的做法。我肯定是先循环 li 了，然后在当前的取得当前的索引，用当前的li去加一个移入移出的效果。。。这样如果你添加了新的li这里就不能用了。而且还要循环挺耗性能的。。。
那么这里就可以用事件委托的方式做了。。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//鼠标滑过li的状态
function mouseRun(e,Active){
var ev=e||window.event;//事件对象
var target=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=“”;
};
};
|
<!– [Format Time: 0 project collaboration software.0033 seconds] –>
|
1
2
3
|
//鼠标移入、移出的效果。这样写方便可以解除绑定
function over(e){mouseRun(e,1);};
function out(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函数
function addLi(sTarget,Now){
var li=document.createElement(“li”);
li.innerHTML=Now*10000;
sTarget.appendChild(li);
};
window.onload=function(){
var ul=document.getElementById(“ul1”);
var oInput=document.getElementById(“input1”);
var Now=3;
//绑定元素事件
MyAddEvent(ul,“mouseover”,over);
MyAddEvent(ul,“mouseout”,out);
MyAddEvent(oInput,“click”,function(){
Now+=1;
addLi(ul,Now)
});
};
window.onunload=function(){
//解除绑定
var ul=document.getElementById(“ul1”);
removeMyAddEvent(ul,“mouseover”,over);
removeMyAddEvent(ul,“mouseout”,out);
};
|
以上是主要代码咯。。。具体效果请看demo