js精简优化

Question

js代码精简问题

over:function(){
            var li = this.li;
            var box = this.box;
            var that = this;
            for(var i = 0,len = li.length; i < len; i++){
                (function(i){
                    li[i].onmouseenter = function(){
                        var oImg = document.createElement('img');
                        oImg.src = this.getElementsByTagName('img')[0].src;
                        oImg.style.width = '300px';
                        oImg.style.height = '300px';
                        box.appendChild(oImg);
                        box.style.display = 'block';
                        that.move();
                        
                    }
                })(i)
            }
        },
        move:function(){
            var li = this.li;
            var that = this;
            var box = this.box;
            for(var i = 0,len = li.length; i < len; i++){
                (function(i){
                    li[i].onmousemove = function(){
                        var e = e || window.event;
                        var a = e.clientX;
                        var b = e.clientY;
                        box.style['top'] = b + 20 +'px';
                        box.style['left'] = a + 20 + 'px';
                    }
                })(i)
            }
        },

里面的循环如何精简，再外面在写一个专门循环的函数如何调用

例如：

loop:function(action,fn){
            var li = this.li;
            var box = this.box;
            for(var i = 0,len = li.length; i < len; i++){
                (function(i){
                    li[i].action = fn;
                })(i)
            }
        },

不胜感激！！！

Answer 1

使用事件代理，在父节点监听子节点的事件， 可以看看这个例子

Answer 2

这种情况就是经典的事件代理的应用场景，根本不需要循环绑定事件。