首页 新闻 会员 周边

javascript中的cloneNode克隆事件为什么克隆不了事件呢？

0
悬赏园豆：100 [待解决问题]

我用cloneNode克隆元素，也加上了事件，但是每个元素都是第一个有事件，

然后第二个就没有了，好纠结。大神帮看看。

http://jsbin.com/ipirut/1/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>javascript</title>
<style type="text/css">
body{
padding:0;
margin:0;
}
ul,li{
padding:0;
margin:0;
list-style:none;
}
.item-move{
width:600px;
margin:50px auto;
position:relative;
overflow:hidden;
padding:15px 30px 15px 20px;
border:2px solid #333;
}
.pre,.next{
width:20px;
height:63px;
text-indent:-9999px;
position:absolute;
top:20px;
background:url("http://mat1.gtimg.com/www/hd2011/icon.png") no-repeat;
}
.pre{
background-position:-180px -54px;
left:5px;
}
.next{
background-position:-157px -54px;
right:5px;
}
#moveTo{
width:600px;
height:70px;
margin:0 auto;
position: relative;
overflow: hidden;
}
#moveTo ul{
position: absolute;
}

#moveTo li{
background:#333;
color:red;
width:110px;
height:70px;
margin-left:10px;
float:left;
position:relative;
vertical-align: middle;
cursor:pointer;
}
#moveTo li img{
width:110px;
height:70px;
}
#moveTo li span{
width:105px;
padding-left:5px;
height:20px;
line-height:20px;;
display:block;
position: absolute;
left:1px;
bottom:-20px;
background:#333;
color:#fff;
font-size:12px;
opacity:0.8;
}
.drog{
overflow:hidden;
border:1px solid slategray;
background:#bbb;
display:none;
position:absolute;
}
#myDrog li{
display:none;
position: absolute;
z-index:999;
}
#allMark{
background:#000;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:100;
opacity:0.8;
filter:alpha(opacity=80);
display:none;
}
.clos{
width:11px;
height:11px;
display:block;
position:absolute;
right:0;
top:-11px;
background:url("http://www.miaov.com/images/messageBoard.gif") no-repeat;
}
</style>
<script type="text/javascript">
window.onload=function(){
var moveTo=document.getElementById('moveTo');
var aDrogBox=document.getElementById('myDrog');
var oul=moveTo.getElementsByTagName('ul')[0];
var aPre=document.getElementById('pre');
var aNext=document.getElementById('next');
var aDrog=aDrogBox.getElementsByTagName('li');
var aLi=moveTo.getElementsByTagName('li');
var itemMove=document.getElementById('item-move');
var aSpan=getClass(moveTo,'jSer');
var oClos=getClass(aDrogBox,'clos');
var oneSize=aLi[0].offsetWidth+10;
var iNum=1;
var i=0;
var bShop=true;
var timer=null;
var tis=null;
var aMark=document.createElement('div');
var timer=null;

document.body.appendChild(aMark);
aMark.id='allMark';

//计算ul的宽度
function ulWidth(){
oul.style.width=oneSize*aLi.length+'px';
}
//页面加载完执行ul的宽度
ulWidth();

//封装运动内部循环
function moves(iLiTarget,reiTarget){
ulWidth();
for(i=0;i<iNum;i++){
startMove(oul,{left:iLiTarget},function(){
for(i=0;i<iNum;i++){
oul.removeChild(reiTarget);
oul.style.left=0;
}
bShop=true;
})
}
}
//向左
function pre(){
if(bShop){
bShop=false;
for(i=0;i<iNum;i++){
var oLi=aLi[i].cloneNode(true);
oul.appendChild(oLi);
moves(-iNum*oneSize,aLi[i]);
}
}
}
//向右
function next(){
if(bShop){
bShop=false;
for(i=0;i<iNum;i++){
var oLi=aLi[aLi.length-1].cloneNode(true);
oul.insertBefore(oLi,aLi[i]);
oul.style.left=-iNum*oneSize+'px';
moves(0,aLi[aLi.length-1]);
}
}
}

timer=setInterval(pre,2000);

//点击鼠标向左移动
aPre.onclick=function(){
pre();
}

//点击鼠标向右移动
aNext.onclick=function(){
clearInterval(timer);
next();
}
//鼠标离开再次执行定时器
itemMove.onmouseout=function(ev){
var oEvent=ev||event;
clearInterval(timer);
timer=setInterval(pre,2000);
oEvent.cancelBubble=true;
}

//1s自动轮播

for(i=0;i<aSpan.length;i++){
aSpan[i].style.bottom='-20px';
}

for(i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].tis=null;
aLi[i].onmouseover=function(){
aSpan[this.index].timer=null;
startMove(aSpan[this.index],{bottom:0})
clearInterval(tis);
}
aLi[i].onmouseout=function(){
startMove(aSpan[this.index],{bottom:-20})
}
aLi[i].onclick=function(){
for(i=0;i<aDrog.length;i++){
aDrog[i].style.display='none';
}
aMark.style.display='block';
aDrog[this.index].style.display='block';
Scroll(aDrog[this.index]);
}
}

for(i=0;i<oClos.length;i++){
oClos[i].index=i;
oClos[i].onclick=function(){
aMark.style.display='none';
aDrog[this.index].style.display='none';
}
}

};
//封装物体的位置
function Scroll(obj){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var WinH=document.documentElement.clientHeight||document.body.clientHeight;
var WinW=document.documentElement.clientWidth||document.body.clientWidth;
var t=scrollTop+(WinH-obj.offsetHeight)/2;
var l=scrollLeft+(WinW-obj.clientWidth)/2;
obj.style.left=l+'px';
obj.style.top=t+'px';
}
//通过类名获取元素
function getClass(elem,cls){
var aEle=elem.getElementsByTagName('*');
var reClass=new RegExp(''+cls+'');
var aResult=[];

for(var i=0;i<aEle.length;i++){
if(reClass.test(aEle[i].className)){
aResult.push(aEle[i]);
}
}
return aResult;
}
//获取元素样式
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
//封装运动框架
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){

var iFog=true;
for(var attr in json){
//1.取值
var iCur=0;
if(attr=='opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=Math.round(parseFloat(getStyle(obj,attr))*100)||100;
}
}else{
iCur=parseInt(getStyle(obj,attr))||0;
}
//2.计算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测值是否达到目标值

if(iCur!=json[attr]){
iFog=false;
}
if(attr=='opacity'){
obj.style.opacity=(iCur+iSpeed)/100;
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
}else{
obj.style[attr]=iCur+iSpeed+'px';
}

if(iFog){
clearInterval(obj.timer);
if(fn)fn();
}
}
},30)
}
</script>
</head>
<body>
<div class="item-move" id="item-move">
<a href="javascript:void(0);" class="pre"  id="pre">向左</a>
<a href="javascript:void(0);" class="next" id="next">向左</a>
<div id="moveTo">
<ul>
<li><img src="http://www.miaov.com/images/gallery/high/4c667fc43614d.png"><span class="jSer">Blue大神</span></li>
<li><img src="http://www.miaov.com/images/index/3_b.png"><span class="jSer">学员--周玲</span></li>
<li><img src="http://tp1.sinaimg.cn/3251300600/180/40019318756/1"><span class="jSer">特效制作--谭金宇</span></li>
<li><img src="http://www.miaov.com/images/index/5_b.png"><span class="jSer">学员--果玲</span></li>
<li><img src="http://www.miaov.com/images/index/1_b.png"><span class="jSer">学员--小武</span></li>
<li><img src="http://www.miaov.com/images/index/12_b.png"><span class="jSer">学员--小健</span></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667fc43614d.png"><span class="jSer">Blue大神</span></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667aed2e72c.png"><span class="jSer">学员--小东</span></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667ac8d27a7.png"><span class="jSer">学员--小娟</span></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667731362df.png"><span class="jSer">学员--小张</span></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667c004564f.jpg"><span class="jSer">学员--len</span></li>
</ul>
</div>
</div>
<div id="myDrog">
<li><img src="http://www.miaov.com/images/gallery/high/4c667fc43614d.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667b5e8a057.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://b264.photo.store.qq.com/psb?/0e0862f0-6a63-4769-972f-71c601696b16/PRyR4MR5nh.aaVfXVG9*wxq9pJujQIyRiUFZJQejSbA!/b/dHR0Z526JAAA" alt=""><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667bdd6f4b0.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c6678af80270.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667a3b1f32a.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667fc43614d.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667b5e8a057.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667bdd6f4b0.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c6678af80270.png"><a href="javascript:;void (0)" class="clos"></a></li>
<li><img src="http://www.miaov.com/images/gallery/high/4c667a3b1f32a.png"><a href="javascript:;void (0)" class="clos"></a></li>
</div>
</body>
</html>

谭小鱼的主页 谭小鱼 | 初学一级 | 园豆：86
提问于：2013-07-17 09:41
< >
分享
所有回答(3)
1

addEventListener/attachEvent 用这种方式的来附加事件

Yu | 园豆：12980 (专家六级) | 2013-07-17 13:31
0

JS绑定事件，有种情况叫做后期绑定，就是为新产生（ajax返回动态产生或者JS, jQ操作）的元素添加事件。实现吧比较复杂，jQ 有个live() on()方法。

 

纯JS的话，你可以利用冒泡事件，冒泡到document.body，判断event.target。

Add On JavaScript | 园豆：217 (菜鸟二级) | 2013-07-25 14:11
0

如果你是用事件绑定的话，事件是与DOM节点完全绑定的，cloneNode复制DOM元素的属性不包括绑定在它上面的事件。如果你希望包含事件的话，可以用事件代理,这样dom节点就与具体的元素没有耦合了，并且性能更好。希望对你有帮助

三剑客 | 园豆：92 (初学一级) | 2013-12-30 21:47
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。