如何让input输入事件变为可取消？event.preventDefault相关问题

问题原因 #

1. 你的事件绑定代码存在参数传递错误：input事件回调中没有接收事件对象，也没有将事件实例传递给_onChange方法，导致_onChange内部拿到的event为undefined，无法读取正确的cancelable属性。
2. 原生DOM规范明确规定，input、change属于输入行为完成后触发的通知类事件，本身的cancelable属性固定为false，无法手动修改为true，也无法调用preventDefault()取消已经完成的输入行为。
3. 你提供的绑定代码还存在语法错误，缺少addEventListener方法的闭合括号。

解决方案 #

如果需要实现可取消的输入拦截逻辑，替换绑定beforeinput事件即可，该事件在输入内容写入DOM前触发，原生cancelable属性为true，支持调用preventDefault()取消本次输入。

修正后的绑定代码 #

this._dataField.addEventListener('beforeinput', (event)=> {
    console.log('beforeinput');
    this._onChange(event);
})

修正后的事件处理代码 #

_onChange(event) {
    console.log('onChange called');
    var x = event.cancelable;
    console.log(x); // 此时输出为true
    // 需要取消输入时可执行下行代码
    // event.preventDefault()
}

如果需要拦截特定键盘输入，也可以绑定keydown事件，该事件的cancelable属性同样为true。

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