createjs事件侦听的一个小坑

最新推荐文章于 2021-01-26 15:54:48 发布
最新推荐文章于 2021-01-26 15:54:48 发布
阅读量2.9k 收藏
点赞数
分类专栏： html5 文章标签： createjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyf1990cs/article/details/53959732
版权
在使用CreateJS时，频繁地add和remove事件监听器导致性能问题。通过断点调试，发现对象上积累了大量监听器。on/off与add/remove的用法不同，on/off内部创建了匿名函数包装回调，因此移除监听必须使用on返回的匿名函数作为参数。正确做法是保存on的返回值，然后用此值调用off方法，以确保正确移除监听。这增加了复杂性，相比之下，直接使用add/remove更简洁直观。
摘要由CSDN通过智能技术生成

重复多次地add和remove之后，每次操作都变得非常卡。

进断点调试之后发现，这个显示对象上被我添加了好几万个listener。

看了一下自己写的窗口基类的代码

	this.on("added", onAddToParent);

        function onAddToParent(event) {
            //do sth. on added
            _this.off("added", onAddToParent);
            _this.on("removed", onRemoveFromParent);
        }

        function onRemoveFromParent(event)
        {
            //do sth. on removed
            _this.on("added", onAddToParent);
            _this.off("removed", onRemoveFromParent);
        }

发现off并没有起作用，只有on在不断地添加侦听，所以每次侦听的数量都以2次方的速度增长。。。。


又去翻了一下api，发现off on 和add/removeEventListener 的用法是不一样的。

add/remove 是和as3一样

但是on/off 是创建了一个匿名函数，这个函数包住了我们传进去的侦听回调函数，然后通过调用这个匿名函数来执行回调，所以在off的地方把我们创建的回调函数当参数并没有用。要把on方法返回的参数，也就是它自己创建

最低0.47元/天 解锁文章
雷乌斯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
createjs基础入门
weixin_29947843的博客
05-02 1194
EaselJS创建图形 var stage = new createjs.Stage("demoCanvas"); var circle = new createjs.Shape(); circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,5); circle.x = 100; circle.y = 100; stage.addChild(circle); stage.update(); EaselJS创建文字 var stage =
CreateJS 事件
小芽教程
05-13 7474
个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf       QQ:909648986 EaselJS 事件 EaselJS 事件类型 1.click 鼠标单击事件 2.dbClick 鼠标双击事件 3.mousedown 鼠标按下事件 4.mouseover 鼠标移过事件 5.mouseout 鼠标移出事件 6.t
createjs开发入门
凹凸实验室
03-01 557
通过实例简单介绍createjs的使用方法PRELOADJSPreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源。LoadQueue类介绍LoadQueue是一个加载管理器，可以预先加载一个文件或者一个文件队列。LoadQueue包含了几个可以订阅的事件：complete: 当队列完成全部加载后触发error: 当队列遇到错误时触发progress: 整个队...
createjs 使用方法简介
09-11 6891
简介createjs是一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。它基于容器进行展示，其中根容器是stage对象，在创建了canvas画布后，首先要创建stage对象，就跟cocos里的根节点一样。
制作动画或小游戏——CreateJS事件（二）
weixin_30344995的博客
05-04 311
在Canvas中如果要添加事件，就需要计算坐标来模拟各种事件，而EaselJS中已经封装好了多个事件，只需调用即可。 一、事件 1）点击 事件是绑定在Shape类中的，click事件与DOM中的意思是一样的，还有个双击事件dblckick，完整的代码可以查看这里。 var object = new createjs.Shape(); object.addEventListe...
一个端午节接粽子的小游戏 made with createjs
最新发布
06-13
本文将深入探讨如何使用JavaScript库CreateJS来创建一个端午节接粽子的小游戏。CreateJS是一个强大的开源工具集，专为HTML5 canvas上的动画、交互和游戏开发而设计，它包含了EaselJS、TweenJS、SoundJS和PreloadJS等...
首次尝试用createjs来写了个小游戏
08-10
首次尝试用createjs来写了个小游戏，拖动小车可以抢红包，抢到红包统计个数，撞到炸弹game over!游戏开始加了进度条，游戏开始加了背景音乐，车撞到炸弹有爆炸的声效！手机端响应式还有些bug，后期会进行修复
基于createjs实现的一个端午节接粽子的小游戏接粽子小游戏源码
06-12
EaselJS是CreateJS的核心部分，提供了一个基于HTML5 Canvas的高级图形API，使得开发者可以轻松地绘制图形、处理事件、创建复杂的形状和动画。在这个游戏中，EaselJS被用来绘制粽子、接盘以及各种背景元素，实现动态...
CreateJS：CreateJS初体验
02-06
CreateJS初体验项目一上线就迫不及待的想跟大家分享做这个项目，算是一个新的尝试，觉得很有意思，在处理类似这种动画效果的h5的时候可以用CreateJS来解决，这里在加载优化上也做了'极致'的优化。 CreateJS是基于...
CreateJS实现打飞机小游戏
长空孤月
06-10 5812
之前对createJs体验了一下，正好看到网上有一篇教程，试着也写了一个打飞机的小游戏，UI相对比较简单，主要记录下实现游戏逻辑的思路。window.onload = function() { canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); preload = n...
CreateJS-EaselJS文档翻译
beyond__devil的博客
01-08 2793
EaselJS EaselJS javascript库，为canvas提供了一个保留的图形模式，包括：一个完整的分层显示列表，一个核心的交互模型，以及一些帮助类，使得 Canvas 中的2D图形更容易处理。Ea stlJS 为使用HTML5 Canvas的丰富图形和交互性，提供了直接的解决方案。 开始 要开始使用 EaselJS，创建一个包装了 'Canvas元素' 的 'Stage'，
认识createjs(二) Container容器及监听事件
u010977934的博客
07-18 4760
Container   一、   Container是一个容器，可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素。例如，你可以将手臂、腿部、躯干和头部聚在一起，把它们转换为一组，同时还可以将各个部分相对彼此移动。放在一个Container中方便统一管理，比如你要做一个按钮，按钮图形和上面的提示文字包含在一个Container中，便可以统一移动。 1、首先还
createjs-打豆豆小游戏制作（2）
k_shl_2011的博客
09-16 1540
上一篇中介绍了这个小游戏的主要部分和用到的两个类，这篇介绍app.js这个类，这里面主要的就是游戏的入口和各个场景之间的切换。
在AS3里..我们无法手动完全删除一个对象,,
走入 IOS
11-12 198
在AS3里..我们无法手动完全删除一个对象,, 以MovieClip为例.. 我们只有在删除它的时候 除了removeChild(对象)外 还必须清空它的子对象 删除所有动态添加的属性 删除所有侦听 删除所有引用 然后等待垃圾回收, 可是实际操作的时候.. 在长长的代码当中..经常会忘记自己什么时候写了侦听..什么时候添加了动态属性 其实,,我们可以借用显示对象中的E...
如何使用Createjs来编写HTML5游戏（七）完成一个简单的打飞机游戏（下）
失业矿工的博客
08-09 5571
有了游戏中需要的所有元素（战机、敌机、星空、子弹），并且飞机可以响应按键左右的移动，剩下的东西就是让子弹动起来，并且检测游戏内各个元素的碰撞情况。 首先是星空的移动， 让星空从屏幕上方向下移动，这样可以造成一种飞机一直在前进的相对的错觉，所有的星星事先都已经保存在一个数组当中，只要通过循环，取出其中的每个星星，在tick中重设Y坐标就可以了。
removeEventListener事件不起作用
平平无奇小码农的博客
01-26 3027
例子：给按钮添加点击事件 <button class="btn2">点我啊啊啊啊</button> var btn2 = document.querySelector('.btn2'); btn2.addEventListener('click', function () { alert('1111'); }, false); btn2.removeEventListener('click', function () { alert('1111'); }, false)
应用createjs库制作一个画画房间，可选颜色，有橡皮擦，画笔大小
05-11
好的，下面是基于createjs库制作的画画房间代码，包括可选颜色、橡皮擦和画笔大小功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画画房间</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="800" height="600"></canvas> <div> <label>画笔颜色：</label> <select id="color"> <option value="#000000">黑色</option> <option value="#ff0000">红色</option> <option value="#00ff00">绿色</option> <option value="#0000ff">蓝色</option> <option value="#ffff00">黄色</option> </select> <label>画笔大小：</label> <select id="size"> <option value="5">小</option> <option value="10" selected>中</option> <option value="15">大</option> </select> <button id="eraser">橡皮擦</button> <button id="clear">清空</button> </div> <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> <script> var stage, canvas, shape, color, size, eraser, clear; function init() { canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); shape = new createjs.Shape(); stage.addChild(shape); color = document.getElementById("color"); size = document.getElementById("size"); eraser = document.getElementById("eraser"); clear = document.getElementById("clear"); stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemousemove", handleMouseMove); stage.addEventListener("stagemouseup", handleMouseUp); eraser.addEventListener("click", function() { color.value = "#ffffff"; }); clear.addEventListener("click", function() { shape.graphics.clear(); stage.update(); }); createjs.Ticker.addEventListener("tick", stage); } function handleMouseDown(event) { shape.graphics.setStrokeStyle(size.value, "round", "round") .beginStroke(color.value) .moveTo(stage.mouseX, stage.mouseY); stage.addEventListener("stagemousemove", handleMouseMove); } function handleMouseMove(event) { shape.graphics.lineTo(stage.mouseX, stage.mouseY); stage.update(); } function handleMouseUp(event) { stage.removeEventListener("stagemousemove", handleMouseMove); } window.onload = function() { init(); }; </script> </body> </html> ``` 代码中，我们创建了一个画布和一个`Shape`对象用于存储画画的图形。通过`select`元素和`button`元素实现了可选颜色、橡皮擦和清空功能。在`init()`函数中，我们初始化了画布和`Shape`对象，并添加了鼠标事件监听器。在鼠标按下时，我们开始绘制图形，并在移动鼠标时不断更新绘制的图形。在鼠标松开时，停止绘制图形。最后，通过`Ticker`对象来更新画布显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值