在HTML代码中直接添加onchange事件是否属于合理的前端开发实践？

是的，该规范完全适用于onchange事件，所有DOM 0级的行内事件绑定写法（包括onclick、onchange、onsubmit、onload等全系列行内事件属性）都属于生产级项目不推荐的开发实践，核心原因和行内写样式、行内绑定onclick一致：

• 违背关注点分离原则：HTML的定位是负责页面结构描述，JS负责交互逻辑，行内绑定事件会把两类逻辑耦合在HTML文件中，后续维护时需要同时在HTML和JS文件中查找关联逻辑，大幅提升维护成本。
• 存在作用域与兼容性问题：行内绑定的事件处理函数必须挂载在全局作用域下才能正常调用，很容易引发全局命名冲突，也无法适配现在前端普遍使用的模块化开发规范——绝大多数生产项目的JS逻辑都封装在模块内部，不会暴露到全局作用域，自然也无法被行内事件属性调用。
• 功能扩展性差：行内绑定事件无法便捷实现事件解绑、给同一个元素绑定多个同类型事件回调、事件委托等高级操作，后续要扩展交互逻辑时限制很多。

你给出的示例代码可以改为标准的事件监听写法，如下：

// 获取目标select元素
const backdropSelect = document.querySelector('select[name="backdrop"]');
// 绑定change事件
backdropSelect.addEventListener('change', (e) => {
  buttonChanger(e.target);
});

当然如果你只是写临时测试Demo、极小的静态页面，行内写onchange不会有明显问题，上述规范主要针对需要长期维护的生产级项目。

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