总结几点大型canvas 2d应用的事件处理机制
事件代理
canvas画布是一个独立的dom。我们不能给我们绘制的元素单独添加事件。所有的事件都添加在canvas画布上，然后再来分发具体的操作。有点类似于我们的dom事件代理，将事件绑在父层节点，再根据点的dom来决定事件操作。前两年用canvas写小游戏的时候，就是在canvas的dom上绑定事件，然后根据鼠标的位置和所在位置的状态来处理对应的事件操作。
模块与事件组织
对于多人开发的大型canvas应用，如何处理事件分发？如何分模块来分工？
事件必须有清晰的处理机制，才能让大家分工明确，代码耦合少。而模块划分，可以按照绘制的不同类型的对象或不同的功能操作来分。
假设我们的应用有一个工具栏，工具栏上的每个按钮代表一种可绘制对象或者一种可执行的操作，当我们点击工具栏上的按钮时。就切换成代表工工具栏每种操作的序号toolType。
我们触发onmousedown onmousemove等事件的时候，根据toolType来获取当前操作下对每种事件的处理函数，比如我们的每个模块都返回一个eventHandler对象，这个对象可能包含{mouseDown:function(){},mouseMove:function(){},mouseUp:function(){}}对不同事件处理逻辑。
这样，负责每个模块人只处理自已模块的事件逻辑就好了。
对象层级
canvas画布上的对象的层级，一般来讲画布上的东西画上去是没有所谓层级的，但是我们要与画布上的东西进行精细的交互，就要在逻辑上给它一个层级。当我们的事件在多个对象的区域范围内的时候，我们应该作用于层级高的对象。这个就要让我们的每个绘制对象保存一个index的属性。 当事件来了，我们可能会给所有的绘制对象按这个index排序。然后遍历判断是否在每个对象的作用范围内。第一个满足条件的进行对应操作，其他的就作不满足的操作。
另外，有了这个index属性，在每次重绘的时候也可以保证不同元素对象的绘制顺序正确。
mvc
数据与绘制分开。只要有每个绘制对象的数据信息就能重绘出来。 任何的事件操作只处理数据不实际操作绘制。 数据处理完毕之后统一触发重绘。 这样我们可以分别专注于数据处理与对象绘制了。
面向对象
每种绘制元素作为一种对象，拥有自已的一套方法。 其中可能有很多同名方法，处理逻辑不一样。也算是一种形式的多态吧。 所有类型的对象也可能拥有很多的公共方法。