Ionic 5：如何使用Javascript为ion-input添加事件监听器

核心错误原因 #

• Function.prototype.bind() 方法的第一个参数是函数运行时的this指向，你需要传入的参数要从第二个位置开始填写，你当前的写法是把id绑定成了函数的this，函数第一个入参仍然是触发事件的事件对象
• 键盘抬起事件在addEventListener中的正确名称是keyup，onkeyup是DOM元素属性写法的命名，不能用在事件监听注册中

修正后代码 #

<ion-input id="totalTimeOpening" type="text"></ion-input>

<script>
    function testChange(id) {
        console.log(id + " Change");
    }

    function testOnKeyUp(id) {
        console.log(id + " KEYUP");
    }

    // bind第一个参数传null表示不修改this指向，第二个参数开始为传入函数的参数
    document.getElementById("totalTimeOpening").addEventListener('ionChange', testChange.bind(null, 'totalTimeOpening'), false);

    // 事件名改为keyup，参数绑定规则同上
    document.getElementById("totalTimeOpening").addEventListener('keyup', testOnKeyUp.bind(null, 'totalTimeOpening'), false);
</script>

更简洁的替代写法 #

你也可以用箭头函数包裹执行逻辑，避免搞混bind的参数规则：

document.getElementById("totalTimeOpening").addEventListener('ionChange', () => testChange('totalTimeOpening'), false);
document.getElementById("totalTimeOpening").addEventListener('keyup', () => testOnKeyUp('totalTimeOpening'), false);

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