Javascript中的输入字段分组

我正在尝试将我的姓名/号码/电子邮件字段组合在一起，以便有一个事件侦听器。我想在用户离开输入字段时播放音频。我已尝试将事件添加到父级

.infofield

类，但它不适用于onblur/focus事件。我想知道如何用Javascript实现这一点

        <section class="infofield">
            <audio id="leave" src= "blur.mp3"></audio>

            <section>
                <p class ="name">Name*</p>
                First: <br><input type="text" name="fname" required><br/>
                Last: <br><input type="text" name="lname" required><br/>
            </section>

            <section>
                <p class ="name">Phone Number*</p>
                <input type="text" name="number" required>
            </section>

            <section>
                <p>Email*</p>
                <input type="email" name="email" required>  
            </section>

        </section>

名称*

第一：


最后：


电话号码*

电子邮件*

我看不出有什么困难，有什么问题吗

const myForm=document.getElementById（'my-form'）
;
myForm.in_fields.querySelectorAll（'input'）.forEach（inElm=>
{
内聚焦=聚焦；
INLEM.onblur=聚焦关闭；
})
功能焦点（e）
{
WiGo.textContent=`evt关注${e.target.name}`
}
功能焦点关闭（e）
{
WiGo.textContent=`evt blur on${e.target.name}`
}  
/*以前的版本--------------------------------------------------
myForm.in_fields.onmouseover=e=>
{
WiGo.textContent='鼠标位于个人信息字段上'
}
myForm.in_fields.onmouseout=e=>
{
WiGo.textContent='鼠标超出个人信息字段'
}
----------------------------------------------------------------------*/

#我的表格{
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
}
字段集{
宽度：22em；
填充：0.1em；
}
传说：以前，
图例：：之后{
内容：'\00a0'
}
标签，输入{
浮动：左；
边缘：.4em；
}
输入{
宽度：11em；
填充：.2em；
边框宽度：1px；
填充：.3em 5px；
}
标签{
显示：块；
明确：两者皆有；
宽度：9em；
文本对齐：右对齐；
线高：1.5em；
}
标签：：之后{
内容：“*：”
}

个人信息
名字
姓
电话号码
电子邮件
发生了什么事

我看不出有什么困难，有什么问题吗

const myForm=document.getElementById（'my-form'）
;
myForm.in_fields.querySelectorAll（'input'）.forEach（inElm=>
{
内聚焦=聚焦；
INLEM.onblur=聚焦关闭；
})
功能焦点（e）
{
WiGo.textContent=`evt关注${e.target.name}`
}
功能焦点关闭（e）
{
WiGo.textContent=`evt blur on${e.target.name}`
}  
/*以前的版本--------------------------------------------------
myForm.in_fields.onmouseover=e=>
{
WiGo.textContent='鼠标位于个人信息字段上'
}
myForm.in_fields.onmouseout=e=>
{
WiGo.textContent='鼠标超出个人信息字段'
}
----------------------------------------------------------------------*/

#我的表格{
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
}
字段集{
宽度：22em；
填充：0.1em；
}
传说：以前，
图例：：之后{
内容：'\00a0'
}
标签，输入{
浮动：左；
边缘：.4em；
}
输入{
宽度：11em；
填充：.2em；
边框宽度：1px；
填充：.3em 5px；
}
标签{
显示：块；
明确：两者皆有；
宽度：9em；
文本对齐：右对齐；
线高：1.5em；
}
标签：：之后{
内容：“*：”
}

个人信息
名字
姓
电话号码
电子邮件
发生了什么事

使用

和

@MisterJojo我使用了字段集，它适用于onclick事件，但不适用于模糊/聚焦事件。我不确定我做错了什么。我只是说，如果要对字段输入进行分组，必须使用字段集html标记use

&

@MisterJojo我使用了字段集，它适用于onclick事件，但不适用于blur/focus事件。我不确定我做错了什么。我只是说，如果你想对字段输入进行分组，你必须使用fieldset html标记。问题是，它适用于mouseover/mouseout事件，但不适用于blur/focus事件。我不确定这是否正确，但我认为这是因为mouseover/out将事件发送到元素本身，并且其中的任何内容，而模糊事件仅检测父元素的焦点丢失。我想弄清楚如何将所有输入字段作为目标，以便为所有字段添加一个事件侦听器问题是，它与mouseover/mouseout事件一起工作，但与blur/focus事件不起作用我不确定这是否正确，但我认为这是因为mouseover/out将事件发送到元素本身以及其中的任何内容，而模糊事件仅检测父元素的焦点丢失。我想弄清楚如何将所有输入字段作为目标，以便向所有字段添加一个事件侦听器