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){&nbsp; &nbsp; &nbsp; &nbsp; redMove();//这里有问题，鼠标移动事件不能传递&nbsp; &nbsp; });这样写事件肯定传递不了啊.因为你函数没有接收.把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){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; ctx.clearRect(0,0,500,500);&nbsp; &nbsp; ctx.drawImage(img,e.clientX,e.clientY,20,20);&nbsp; &nbsp;&nbsp;})</script>

Answer 2

首先 分离后&nbsp;1、因为没有传递 e 参数//红色气泡添加移动函数canvas.addEventListener("mousemove", function(e){&nbsp; &nbsp; redMove();//这里有问题，鼠标移动事件不能传递});这里 redMove 函数 没有传递 e 参数， 并且也没有 全局变量做暂存处理；所以e在这里 已经废弃掉了；导致&nbsp;// 重新添加气泡RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);这里 的 getMousePos(e)&nbsp; 中 参数&nbsp; e&nbsp; 来源于 何处？&nbsp;2 、抖动 是因为 没有使用硬件加速 ；只是使用定位的top left 是会造成抖动的；如果只是对图片做动画处理的话，为什么不用transform 的各个属性值呢？这样启动硬件加速 就不会造成抖动了