书接上文你真的了解Canvas吗--解密六【ZRender篇】

目录

❓解惑环节

再次梳理流程 

step - 1

step - 2 

step - 3 

step - 4

冒泡函数dispatchToElement

总结

---

❓解惑环节

首先来回答一下

先来看看目前调用on函数的地方

再次梳理流程 

我们点击图形的时候是通过addEventListener监听到我们的事件，流程为

• step - 1

addEventListener将所有的事件都进行了监听，上一篇也提到了分为3大块mouse、touch和pointer

• step - 2 

回调函数的触发，执行trigger函数，this为HandlerProxy。所以答案出来了我们拿到的Eventful的属性_$handlers的key值为'click', 'dbclick', 'mousewheel', 'mouseout','mouseup', 'mousedown', 'mousemove', 'contextmenu'。截个图

• step - 3 

极简版trigger函数，也是因为_$handlers存在才能走到这。接下来就走Handler里面的click

• step - 4

到这里，一步步的事件监听捕获算是结束了，下一步就是冒泡函数 

冒泡函数dispatchToElement

 显而易见三点

1. 通过while循环实现冒泡的机制
2. 通过el = el.parent循环往上查找父视图
3. 通过外部属性cancelBubble控制循环是否break

其实冒泡的原理不就是这样吗，需要一个循环体一层层往父视图遍历，当不需要冒泡了外部设置一个属性将循环体打破即可！！！

总结

最终打印的结果如下图

这篇文章主要是解答上一篇文章遗留下来的问题、顺带又梳理了一遍ZRender里面事件捕获的流程以及最后的事件冒泡函数的实现原理。大家有什么不懂的可以和我留言哦！

留个思考的问题，如果是下面的code，又会是怎样的输出呢？

javascript">circle.on("click", function (e) {console.log("Circle");
});
g1.on("click", function (e) {console.log("Group 1");
});
g3.on("click", function (e) {console.log("Group 3");
});
g4.on("click", function (e) {console.log("Group 4");
});

如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。