自定义内置HTMLInputElement事件处理器定义失效原因咨询

这本质是内置元素事件属性的特殊实现加上SWC编译类字段的行为差异共同导致的问题，具体拆解如下：

1. 内置元素的onxxx事件属性是访问器，不是普通属性 #

HTMLInputElement这类内置元素的oninput、onchange、onclick等事件属性，并不是普通的数据属性，而是浏览器通过get/set访问器实现的：当你给this.oninput赋值时，实际上是调用了访问器的set方法，浏览器内部会通过这个setter来注册事件监听器。

如果直接在实例上添加同名的自有属性，会覆盖原型上的访问器，导致浏览器无法通过setter注册监听器——事件触发时自然不会执行你的回调。

2. SWC编译类字段的行为导致访问器被屏蔽 #

你用类公共字段（比如oninput = (...) => {}）定义事件回调时，SWC的编译逻辑会在实例上直接创建一个自有属性，而不是调用原型上的访问器setter。这种赋值方式会屏蔽内置元素的原生访问器，导致事件监听器注册失败。

3. 为什么调整后只有onclick生效？ #

看你调整后的代码：

• oninput还是类公共字段，编译后依然是自有属性，屏蔽了访问器，所以不生效；
• onchange先声明了类字段（同样会创建自有属性），后续在构造函数中赋值只是给这个自有属性重新赋值，没有触发访问器setter，所以也不生效；
• onclick没有定义类字段，直接在构造函数中给this.onclick赋值，此时调用的是原型上的原生访问器setter，浏览器正确注册了监听器，因此事件触发时能执行回调。

解决方案 #

方案一：统一在构造函数中赋值事件属性 #

放弃类公共字段写法，所有事件回调都在super()之后的构造函数中赋值：

class MyInputElement extends HTMLInputElement {
    constructor() {
        super();
        this.oninput = (...args) => console.log("input", ...args);
        this.onchange = (...args) => console.log("change", ...args);
        this.onclick = (...args) => console.log("click", ...args);
    }
}

方案二：使用addEventListener注册事件（更可靠） #

完全避开访问器属性的坑，直接用标准事件注册API：

class MyInputElement extends HTMLInputElement {
    constructor() {
        super();
        this.addEventListener('input', (...args) => console.log("input", ...args));
        this.addEventListener('change', (...args) => console.log("change", ...args));
        this.addEventListener('click', (...args) => console.log("click", ...args));
    }
}

方案三：调整SWC编译配置 #

开启useDefineForClassFields配置（在SWC的.swcrc或rollup插件配置中），让类字段的编译行为更符合ES标准，正确触发访问器的setter：

{
  "jsc": {
    "parser": {
      "syntax": "typescript"
    },
    "transform": {
      "legacyDecorator": false,
      "decoratorMetadata": false,
      "useDefineForClassFields": true
    }
  }
}

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