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

Question

我用cloneNode克隆元素，也加上了事件，但是每个元素都是第一个有事件，然后第二个就没有了，好纠结。大神帮看看。http://jsbin.com/ipirut/1/edit
<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>
JavaScriptcloneNode函数

Answer 1

标准浏览器是不复制事件的，防止循环引用无法释放内存。IE使用attachEvent添加的事件可以复制，直接dom.onclick也无法复制。重新给克隆的对象添加事件来解决

Answer 2

是给克隆出来的oLi添加click事件吗？
大神可以示范一下，这里就卡住了

Answer 3

下面方法 参考下
function attachLoadedHandler() {
            $("iframe").each(function (i) {
                var iframe = document.getElementById(this.id);
                if (iframe.attachEvent) {
                    iframe.attachEvent("onload", function () {
                        alert(1);
                    });
                }
                else {
                    iframe.onload = function () {
                       alert(1);
                    };
                }
            });
        }

Answer 4

    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');//不需要，直接绑定事件的时候添加就行了，要不clone后对象已经不是原来的了，被移除了
        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);
                    bindEvnets(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]);
                    bindEvnets(oLi);///重新绑定事件
                    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';
        }
        function bindEvnets(o) {/////////////事件绑定
            o.index = o.getAttribute('index');
            aSpan[o.index] = getClass(o, 'jSer')[0];////////////更新aSpan数组，clone后已经不是原来的对象了
            o.onmouseover = function () {
                aSpan[this.index].timer = null;
                startMove(aSpan[this.index], { bottom: 0 })
                clearInterval(tis);
            }
            o.onmouseout = function () {
                startMove(aSpan[this.index], { bottom: -20 })
            }
            o.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 < aLi.length; i++) {
            aLi[i].setAttribute('index', i);//注意这里。直接dom.index，添加这种自定义属性clone时在标准浏览器下克隆不了这种自定义属性，setAttribute的可以
            bindEvnets(aLi[i])
        }        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)
}你的代码如果iNum>1会出问题要改这个bug基本要修正过你所有代码

Answer 5

事件委托，或者重新绑定，或者直接在元素上加onclick="javascript:你的执行方法"