ECharts 3.0底层zrender 3.x源码分析3-Handler（C层）

这一篇，介绍下Handler处理机制。

Handler负责事件处理,包括’click’, ‘dblclick’, ‘mousewheel’, ‘mouseout’, ‘mouseup’, ‘mousedown’, ‘mousemove’, ‘contextmenu’等。我们知道canvas API没有提供监听每个元素的机制，这就需要一些处理。处理的思路是：监听事件的作用坐标（如点击时候的坐标），判断在哪个绘制元素的范围中，如果在某个元素中，这个元素就监听该事件。

一些demo和没有在博客中介绍的源码请进我的github仓库。

https://github.com/zrysmt/echarts3/tree/master/zrender

1.Handle.js整体

同样Handle.js文件的结构是一个构造函数，一个prototype扩展原型，一些混入模式。

我们首先看在入口（zrender.js）中的调用

var handerProxy = !env.node ? new HandlerProxy(painter.getViewportRoot()) : null;//env.node默认为false
//HandlerProxy 是移动端的一些处理事件
this.handler = new Handler(storage, painter, handerProxy, painter.root);

构造函数：

var Handler = function(storage, painter, proxy, painterRoot) {
   
        Eventful.call(this);
        this.storage = storage;
        this.painter = painter;
        this.painterRoot = painterRoot;
        proxy = proxy || new EmptyProxy();
        /**
         * Proxy of event. can be Dom, WebGLSurface, etc.
         */
        this.proxy = proxy;
        // Attach handler
        proxy.handler = this;
        this._hovered;
        /**
         * @private
         * @type {Date}
         */
        this._lastTouchMoment;