addEventListener怎么深层传递事件e参数

Question

使用addEventListener时怎么在匿名函数哪里传递event呢？我的本意是在canvas画布上弄一个跟随鼠标移动的图片；以下是全部代码，html没有展示var convas;var context;window.onload=function(){    //设置画布    canvas=document.getElementById("canvas");    canvas.height = 600;    canvas.width  = 800;    //获取二维绘图上下文    context=canvas.getContext("2d");    //生成红色气泡    function RedBubble(redFile,redX,redY,redW,redH){        var imgRed= new Image();        imgRed.onload= function(){            context.drawImage(imgRed,redX,redY,redW,redH);        }        imgRed.src= redFile;    }    //获取当前鼠标位置    function getMousePos(event) {          var e = event || window.event;          return {'x':e.clientX,'y':e.clientY}    }    //红色气泡移动函数    function redMove(){        //记录下所有气泡的位置        //清除画布        context.clearRect(0, 0, canvas.width, canvas.height);        // 重新添加气泡        RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);    }    //红色气泡添加移动函数    canvas.addEventListener("mousemove", function(e){        redMove();//这里有问题，鼠标移动事件不能传递    });}取消掉嵌套这样可以达到目的canvas.addEventListener("mousemove", function(e){        context.clearRect(0, 0, canvas.width, canvas.height);        RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);    });但是鼠标移动会有明显闪烁，不够流畅是因为由于事件驱动画布绘制导致的吗？在考虑使用定时器递归推动canvas绘制而不是使用mousemove推动canvas绘制

Answer 1

canvas.addEventListener("mousemove", function(e){

        redMove();//这里有问题，鼠标移动事件不能传递

    });

这样写事件肯定传递不了啊.因为你函数没有接收.

把redMove(e)传进去.估计也会卡顿.

卡顿的原因是你加载图片的时候.

RedBubble方法里面创建了对个图片对象,第一没有必要,第二消耗太多内存

就创建一个图片,然后在addEventListenter里面改变坐标就可以了.

这是刚写的简易代码.可以参考一下.

<canvas id="c" width="500" height="500"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("c");

var ctx = canvas.getContext("2d");

var img = new Image();

img.src = "1.png";

canvas.addEventListener("mousemove",function(e){

    

    ctx.clearRect(0,0,500,500);

    ctx.drawImage(img,e.clientX,e.clientY,20,20);

    

})

</script>

Answer 2

首先 分离后 

1、因为没有传递 e 参数

//红色气泡添加移动函数

canvas.addEventListener("mousemove", function(e){

    redMove();//这里有问题，鼠标移动事件不能传递

});

这里 redMove 函数 没有传递 e 参数， 并且也没有 全局变量做暂存处理；所以e在这里 已经废弃掉了；

导致 

// 重新添加气泡

RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);

这里 的 getMousePos(e)  中 参数  e  来源于 何处？ 

2 、抖动 是因为 没有使用硬件加速 ；只是使用定位的top left 是会造成抖动的；如果只是对图片做动画处理的话，为什么不用transform 的各个属性值呢？这样启动硬件加速 就不会造成抖动了