事件监听机制

     最近有参加比赛，做成一个产品，主要功能就是实现画板开发功能和立体成像，我的工作呢就是做好画板开发就行，首先画板开发是基于HTML5开发的，说白了就是html5的canvas元素做的一个画布然后执行一系列的绘画工作。但是由于画板要实现的功能很多，所以就在时间的监听机制上面开始忙活起来了。

首先要监听鼠标的三个时间 mousedown,mousemove,mouseup然后对其相对应的动作执行相对应的事件，起初做的事用

document.addEventListener('mousedown',function (){},false);

　　

来监听相对应的动作然后分配相对应的事件但是要知道做成一个画板的产品并不是仅仅只有一个两个功能我们还要有许许多多的附加功能，这时候就发现矛盾了 要害死都单一的用addEventListener()的话看起来貌似效果是叠加起来的这样子的话如果我之前是执行的铅笔动作然后想执行橡皮操作，事件是都能执行的但是就是效果是叠加的也就是说前面你擦过的东西后面又会画出来的 代码如下

document.addEventListener('mousedown',pencil,false);
document.addEventListener('mousedown',eraser,false);

如果代码是这样子的话效果是叠加起来的 当然有人会说有事件的监听就会有时间的监听移除呀，答案是肯定的，有监听是肯定有移除的，但是对于监听鼠标事件的话，尤其像这种绘画功能监听是要监听鼠标的一整套动作的就是说会有mousedown，mousemove，mouseup如果你要移除监听的话就必须是把一整套鼠标的动作都移除了，如果你是有两个动作切换的话你就只需要移除三个动作，再绑定三个动作，但是一旦动作很多的话你的执行操作就是指数级增长，代码如下

document.removeEventLitener('mousedown',fun1,false);
document.removeEventLitener('mousemove',fun2,false);
document.removeEventLitener('mouseup',fun3,false);
document.removeEventLitener('mousedown',fun4,false);
document.removeEventLitener('mousemove',fun5,false);
document.removeEventLitener('mouseup',fun6,false);
.....
.....
.....
.....
docuemnt.addEventListener('mousedown',a,false);
document.addEventListener('mousemove',b,false);
document.addEventListener('mouseup',c,false);

这样子势必会在效率上面做出很大的牺牲 所以我痛下决心对整个框架要进行改版，所以就在网上搜啊搜，可是大多数都是用的是addEventListener很明显这些人都是实现单一事件的绑定，于是我去了Stack Overflow 上面貌似也是这个解决办法（主要原因是楼主的英语确实不怎么地）；所以就还是在本地想想办法把。

辛亏的是我保留了一份jquery的api手册 闲来没事找到了bind，看到他的接触办法就只有一句语句

document.unbind();

这无疑对我来说是一个好消息，因为我的很多帮顶的事件接触的时候就只需要一句unbind()；我再也不用修改框架了，就直接把addEventListener修改成bind把需要写成removeEventListener的地方写成unbind就行了 妈妈再也不用担心我的代码啦