Javascript 如何使用“addEventListener”中的模糊事件获取所有表单输入值？

我试图使用

addEventListener

动态获取表单值，但我只是获取第一个输入，没有获取其他输入

这是我当前的代码：

$（文档）。准备好了吗(
函数（）{
const user_input=document.querySelector（'input[type=“text”]，input[type=“password”]）；
用户输入.addEventListener(
“模糊”，
功能（事件）{
var target=event.target；
如果（target.name==“first_name”）{
console.log（'first name:'+target.value）；
}
如果（target.name==“mid_name”）{
log（'mid name:'+target.value）；
}
如果（target.name==“姓氏”）{
console.log（'last name:'+target.value）；
}
如果（target.name==“密码”）{
console.log（'password:'+target.value）；
}
}
);
}
);

名字：

mid_名称：

姓氏：

密码：

要实现预期目标，必须更改代码中的两个部分

首先要更改的是使用
queryselectoral
而不是
querySelector
。不同之处在于
querySelector
一次只选择一个元素，而
querySelectorAll
选择与选择器匹配的所有元素

第二件必须更改的事情是将addEventListener应用于数组中的任何元素，因为它们是不同的组件，并且有不同的事件要侦听

以下是运行代码：

我希望这有帮助：）

像这样


函数updateResult（）{
$（'#result'）.text（JSON.stringify（$（'#inputs'）.serializeArray（）.map（x=>x.name+'：'+x.value）））
}
$（文档）.ready（函数（）{
$（'input'）。在（'change'，function（）上{
updateResult（）
})
})

名字：

mid_名称：

姓氏：

密码：

除了您面临的
querySelector（）
vs
queryselectoral（）
问题，我建议您使用本机从表单中获取所有数据，以下是一个片段：



document.getElementById（'mybutton'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
让myForm=document.getElementById（'myForm'）；
设formData=newformdata（myForm）；
for（让formData输入）{
控制台日志（输入）；
}
});

答复
名字：

mid_名称：

姓氏：

密码：

获取数据
document.querySelector
返回一个节点，即与给定选择器匹配的第一个节点。@sdgluck那么我们是否有一些可以在整个块中工作的东西，比如给定表单ID或name@user889030我不明白你的评论是什么意思。但是，选择多个元素是通过。我是否可以建议不要分配多个事件？像这样的东西；这只是
$（document）.ready（function（）{
..
}）中的一行代码
。文档方法querySelector（）返回文档中与指定选择器或选择器组匹配的第一个元素。您需要使用另一个选择器来获取每个元素。@Daelandry选择器（即字符串）很好。他们需要不同的方法或不同的方法。添加了更好的解释，代码可以工作，但需要一些解释：Pthanks:）所以我们必须按照@sdgluck querySelector return first node only所述循环我刚刚完成了解释，我做了代码格式化；）正如您所看到的，描述相当长，这就是为什么我迟来完成：）@user889030，当然是：）它更干净，使用更少的代码，也是本地javascript。
$( document ).ready( function() {
    const user_input = document.querySelectorAll('input[type="text"], input[type="password"]');

    user_input.forEach(
        function(userInput) {
            userInput.addEventListener(
                'blur', 
                function ( event ) {
                    var target = event.target;

                    if( target.name == "first_name" ) {
                        console.log( 'first name : ' + target.value );
                    }

                    if ( target.name == "mid_name" ) {
                        console.log( 'mid name : ' + target.value );
                    }

                    if ( target.name == "last_name" ) {
                        console.log( 'last name : ' + target.value );
                    }

                    if ( target.name == "password" ) {
                        console.log( 'password : ' + target.value );
                    }

                }
            );  
        }
    );

});