本文是 Vue3 源码实战专栏第 15 篇，实现事件注册功能。
按照专栏进度前几篇文章已经实现了数据渲染到页面上，但此时只是静态页面没有任何交互事件。本文就来实现事件的注册功能，让页面元素可以交互。
在 example 示例项目中，app.js的渲染函数添加事件函数，
以上代码中，在h函数props对象参数中添加了事件函数，按照 Vue3 的官方要求，事件名定义以on开头，后接首字母大写的event。在hello所属的p标签上绑定了点击事件，点击会在控制台输出hello；在world所属的p标签上绑定了鼠标按下事件，鼠标按下会在控制台输出world。
已知事件函数是放在props参数里，那相应的实现逻辑应该就是props这里处理。
在renderer.ts中，mountElement方法循环处理了props对象，针对标签属性是通过setAttribute实现绑定，对于事件注册则需要单独处理。
上面代码中单独处理key是事件的情况，使用正则表达式验证是以on开头且第三个字母是大写的，就认定为事件，原生JS中事件注册就是简单的使用addEventListener，其中事件名event需要转换成小写，事件函数就是value。
执行yarn build进行打包，启动example项目进行验证。
推荐阅读
原文始发于微信公众号（前端一起学）：3行代码实现事件注册
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/191217.html
