onclick内联调用、addEventListener与React onClick的区别及原理咨询

一、三者核心区别 #

1. HTML内联onclick="myFunction()" #

• 这不是“直接调用函数”，浏览器会把这个字符串解析成一个包装函数：function(event) { myFunction(); }，点击时先执行这个包装函数，再调用myFunction。
• 函数的查找作用域是全局作用域，必须确保myFunction在全局可访问；如果要传递事件对象，得手动写onclick="myFunction(event)"。
• 写法耦合HTML与JS代码，不利于维护，还存在XSS注入风险，现代开发中很少使用。

2. 原生JS的addEventListener写法 #

• 这是W3C标准的事件监听API，传递的是函数引用，而非立即执行函数。
• 点击触发时，浏览器会自动将原生事件对象作为第一个参数传入目标函数；支持给同一个元素添加多个同类型事件监听，不会互相覆盖；还能通过第三个参数控制事件在捕获/冒泡阶段触发。
• 完全解耦HTML与JS，函数作用域由定义时的上下文决定，更符合模块化开发规范。

3. React的onClick={onClickFunction}写法 #

• React的onClick是合成事件（SyntheticEvent），并非原生DOM事件，传递的同样是函数引用。
• React底层采用事件委托机制：只在根DOM节点绑定原生事件，当真实点击发生时，React会生成跨浏览器兼容的合成事件对象，再根据虚拟DOM树找到对应的组件，调用传入的函数引用并传递合成事件。
• 如果写成onClick={onClickFunction()}会导致组件渲染时立即执行函数，而非点击时触发，这是新手常踩的坑。

二、传递函数引用时的触发底层原理 #

不管是原生addEventListener还是React的onClick，本质都是事件订阅-触发模型：

原生JS的触发逻辑 #

1. 调用addEventListener时，浏览器会在目标DOM元素的事件监听列表中添加一条记录，保存函数引用、事件类型（如click）、触发阶段（捕获/冒泡）等信息。
2. 当用户触发点击事件，浏览器会按照事件流（捕获阶段→目标元素→冒泡阶段）遍历DOM树。
3. 遇到匹配的事件监听记录时，取出保存的函数引用，以当前DOM元素为this（若函数用箭头函数/bind修改过this则除外），将原生事件对象作为参数，执行该函数。

React的触发逻辑 #

1. React初始化时，会在根DOM节点上绑定所有支持的原生事件（如click），统一管理事件监听。
2. 真实DOM触发点击时，原生事件先被根节点的监听函数捕获，React基于此创建合成事件对象（抹平不同浏览器的事件差异）。
3. React根据虚拟DOM的层级关系，找到触发事件对应的组件实例，调用该组件props.onClick对应的函数引用，并将合成事件对象传入。
4. 事件处理完成后，合成事件会被React自动回收，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Amal Kuriakose