编译
1、事件的编译是通过processAttrs这个方法来处理的;
2、通过正则匹配元素绑定的事件类型、修饰符、对应的值;
3、addHandler 函数,根据 modifier 修饰符对事件名 name 做处理,处理普通事件和原生事件,对name 做归类,返回处理后的AST;
4、根据 AST 元素节点上的 events 和 nativeEvents 生成 data 数据;
编译流程图如下
![](https://img.haomeiwen.com/i13238271/bdd012fcd91ab897.jpg)
DOM 事件
1、DOM事件是对原生事件的处理,最终通过原生的addEventListener 和removeEventListener 来实现监听和移除监听;
2、updateListeners 的时候,会比较新旧事件回调的方法,如果存在只是改变引用,如果为新添加,则add,如果移除事件则remove;
![](https://img.haomeiwen.com/i13238271/780c6b360161f63e.jpg)
自定义事件
父子组件事件交互
1、通过修饰符 区分native 还是非native 事件,非native事件赋值给listeners,native 事件赋值给data.on;
2、data.on 事件的处理走上面原生DOM事件处理方式;
3、listeners 通过对子组件添加_parentListeners;
4、父组件通过updateListeners 的add move 来添加绑定事件,主要应用事件中心来实现;
![](https://img.haomeiwen.com/i13238271/3ba69b84ddea409d.png)
事件中心
![](https://img.haomeiwen.com/i13238271/9239c9172c76e8b8.png)
网友评论