javascript中的cloneNode克隆事件为什么克隆不了事件呢？
我用cloneNode克隆元素，也加上了事件，但是每个元素都是第一个有事件，
然后第二个就没有了，好纠结。大神帮看看。
http://jsbin.com/ipirut/1/edit
JavaScript cloneNode 函数
<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>
[解决办法]
标准浏览器是不复制事件的，防止循环引用无法释放内存。
IE使用attachEvent添加的事件可以复制，直接dom.onclick也无法复制。
重新给克隆的对象添加事件来解决
[解决办法]
下面方法 参考下
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);
};
}
});
}
[解决办法]
你弄那么多事件就是个错误的事情。改用事件委托吧。
[解决办法]
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)
}
