vue.js 什么参数可用于事件类型onInput？

v8wbuo2f 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(141)

当我试图理解html / JavaScript / vue时，我遇到了以下代码片段。

<input type="text" onInput="doAction(event);">

        <script>
            var mesdata = {
                message: 'type your message'
            };
            var app = new Vue ({
                el: '#app',
                data: mesdata
            })
            function doAction(content){
                mesdata.message = content.target.value;
            }
        </script>

我也看到了以下取得了同样的结果

<input type="text" onInput="doAction(this);">

        <script>
        ... same as above ...
            function doAction(content){
                mesdata.message = content.value;
            }
        </script>

当我使用content.type时，我发现我正在传递输入类型和文本类型。
我能理解this的用法，但想知道event从何而来。当我搜索w3 school definition of onInput event时，我没有看到任何可以通过的参数。关于每个事件参数的定义，有什么好的参考资料？
还有，我可以采取什么样的预防措施来避免类型不匹配？

vue.js

来源：https://stackoverflow.com/questions/60660830/what-arguments-are-available-for-event-type-oninput

1条答案

按热度按时间

91zkwejq1#

在定义内联事件处理程序onInput="doAction(event);"时，有两个已知变量：

this，触发事件的DOM元素
event，引用刚触发的事件的全局变量window.event

因此，当您使用参数this调用doAction时，您可以通过应用value来获取DOM元素的值。当参数为event时，您需要首先获取触发事件的DOM元素，然后获取其值（target.value）。
这里有一个演示。请注意，不建议使用内联事件处理程序，而应使用事件处理程序（请参阅MDN：内联事件处理程序-不要使用这些）。还请注意，由于事件对象会自动传递给事件处理程序，因此不需要在addEventListener中指定它（请参见MDN：事件对象

// wrong variable naming, the parameter should be e, ev, evt, ...
function doAction1(content) {
  console.log(content.target.value);
  console.log("Is content an event?", content instanceof Event);
  console.log("Is content === window.event?", content === window.event);
  console.log('Is content.target === document.querySelector("input")?', content.target === document.querySelector("input"));
}

function doAction2(content) {
  console.log(content.value);
  console.log("Is content an event?", content instanceof Event);
  console.log("Is content an element?", content instanceof Element);
}

function doAction3(e) {
  console.log(e.target.value);
  console.log("Is e an event?", e instanceof Event);
}

// use addEventListener rather that inline event handler
// event object is automatically passed to event handler
document.querySelector("#myInput3").addEventListener(
  "input",
  doAction3
)

<input type="text" placeholder="parameter is event" onInput="doAction1(event);">

<input type="text" placeholder="parameter is this" onInput="doAction2(this);">

<input id="myInput3" type="text" placeholder="parameter is event">

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js 什么参数可用于事件类型onInput？

1条答案

相关问题

热门标签

最新问答