怎样进网站空间,网站备案号大全,阿里云如何建设网站,深圳高端做网站公司目录
#x1f4da;入口
Circle - 图形
Group - 组
事件捕获 - 流程
step - 1
step - 2
总结 这篇文章我们讲讲Circle圆形#xff0c;Group组的使用以及大家最熟悉又陌生的事件捕获和冒泡在ZRender中的实现#xff0c;篇幅较长#xff0c;且听我慢慢分析。 #x…目录
入口
Circle - 图形
Group - 组
事件捕获 - 流程
step - 1
step - 2
总结 这篇文章我们讲讲Circle圆形Group组的使用以及大家最熟悉又陌生的事件捕获和冒泡在ZRender中的实现篇幅较长且听我慢慢分析。 入口
var zr zrender.init(document.getElementById(main));
var circle new zrender.Circle({scale: [1, 1],shape: {cx: 0,cy: 0,r: 100,},
});var g1 new zrender.Group({position: [100, 100],
});
g1.add(circle);var g2 new zrender.Group();
g2.add(g1);var g3 new zrender.Group();
g3.add(g2);var g4 new zrender.Group();
g4.add(g3);circle.on(click, function (e) {console.log(Circle);
});
g1.on(click, function (e) {console.log(Group 1);e.cancelBubble true;
});
g3.on(click, function (e) {console.log(Group 3);// e.cancelBubble true;
});
g4.on(click, function (e) {console.log(Group 4 should not be triggered);
});zr.add(g4);
Circle - 图形 Circle.js Circle没有一些花里胡哨的东西而且也不需要PathProxy的配置直接通过ctx.arc()就可以实现很简单方便。
Group - 组 Group.js 值得注意的是Group不是继承于Path的而是Element说明它不属于图形化的一种而它又有_children属性又将child.parent this;这就和我们后面说到的冒泡相呼应了一套父子关系层级关系-- 事件的捕获和冒泡将是我们这篇文章的重点
事件捕获 - 流程 HandlerProxy.js 图中①②两点是初始化过程的补充涉及初始化可以看我第一篇你真的了解Canvas吗--解密一【ZRender篇】里面有详细的流程介绍 step - 1 未列举完此对象中是一个个事件函数可对应后面那张图 HandlerProxy.js-自执行函数对应所有的事件 step - 2 重要部分我都文字说明了 这里主要是addEventListener会实时监听事件触发localDOMHandlers里面的回调函数this的值绑定到class HandlerDomProxy()的实例对象就像下图。想了解更多this指向可参考我的这篇文章我的这篇文章JS中的this 能使用HandlerDomProxy里面的属性 注意这里是初始化时期就动态加入到localDOMHandlers中 函数normalizeEvent咱先不关注与我们主流程无关
再看看trigger函数这是个重点函数 _$handlers的数据来源往下看 Handler.js初始化阶段调用的函数 一个对象key事件名valuewrap数组 上面的trigger函数重点执行就是hItem.h.call(hItem.ctx, args[0]);hItem.ctx是Handler实例对象针对于主流程hItem.h就是我们的click事件
pson方法在html中也有调用我这边为什么不用那边的举例呢大家可以思考一下并留言和我互动哦答案我会发布在下篇文章中大家也可以去参考~ Handler.js中我们找到原型链上声明好的回调方法最终执行了dispatchToElement函数 dispatchToElement函数就是最后我们将要提到的事件冒泡由于篇幅原因我们下一章再讲吧
总结
这篇文章主要讲了另一个图形Circle以及事件冒泡中我们需要用到的Group最后一部分就是事件捕获的一系列流程还是比较复杂且感觉上“乱”的。主要的原因是this的指向问题因为此处涉及到的hItem.ctx是精髓确定了哪个实例对象执行对应的方法CircleHandlerHandlerDomProxy
好了先讲到这里我们下一篇文章见~~
如果觉得有收获麻烦给个赞和关注。你的鼓励是我写作的动力大家一起学习一起进步。
