javascript - js精简优化

问题描述

问 题

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)
            }
        },

不胜感激！！！

解决方案

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

这篇关于javascript - js精简优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！