Ionic 5：如何使用 Javascript 将事件侦听器添加到离子输入答案

【问题标题】：Ionic 5: How to add event listener to ion-input using JavascriptIonic 5：如何使用 Javascript 将事件侦听器添加到离子输入
【发布时间】：2021-11-07 07:09:18
【问题描述】：

我正在尝试将事件侦听器添加到离子输入，因此当发生更改和 onkeyup 时，相应的函数会使用传入的 id 执行

代码

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

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

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

    document.getElementById("totalTimeOpening").addEventListener('ionChange', testChange.bind('totalTimeOpening'), false);


    document.getElementById("totalTimeOpening").addEventListener('onkeyup', testOnKeyUp.bind('totalTimeOpening'), false);
</script>

当前代码似乎将整个 ion-input 对象传入

【问题讨论】：

在您的 testChange 和 testKeyUp 上，当您记录“id”时，您会看到什么，是否有您想要在“id”中的属性？我不确定你在找什么。
@KevinCrum 目前对于 testChange，我看到“[object CustomEvent] Change”，对于 testKeyUp，我什么也没看到，即列表器不工作。我想看到的是那里的离子输入ID，例如testChange的输出应该是“totalTimeOpening Change”和testOnKeyUp的“totalTimeOpening KEYUP”。传入的 id = totalTimeOpening
你可以记录 id.value 或 id.target.value 吗？原谅我离开我的工作站检查我的离子代码。
另外，有时当您的控制台显示 [object *] 时，您可以 json.stringify 对象以便查看数据。如果您喜欢将控制台用作调试工具，它很有用：console.log(JSON.stringify(variable))
<ion-input id="totalTimeOpening" type="text" (ionChange)="yourFunction()"></ion-input>你可以这样做。

标签： javascript ionic-framework ionic5

【解决方案1】：

我想通了。

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

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


        document.getElementById("totalTimeOpening").addEventListener('ionBlur', function(){
            testChange('totalTimeOpening')
        });


        document.getElementById("totalTimeOpening").addEventListener('ionInput', function(){
            testOnKeyUp('totalTimeOpening')
        });

函数必须进入 function(){here}) 并且它可以工作。此外，onkeyup 似乎无法与 ionic 一起使用，而 ionInput 似乎可以作为替代品使用

【讨论】：