在javascript中对输入字段进行分组

Question

我正在尝试将我的姓名/号码/电子邮件字段分组在一起，以便可以使用一个事件监听器。我想这样做，以便当用户离开输入字段时，它会播放音频。我尝试将事件添加到父.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>

Answer 1

我看不出任何困难，这是什么问题？

const myForm = document.getElementById('my-form')
  ;
myForm.in_fields.onmouseover=e=>
  {
  WiGo.textContent = 'mouse is over Personal informations fields'
  }
myForm.in_fields.onmouseout=e=>
  {
  WiGo.textContent = 'mouse is out of Personal informations fields'
  }

fieldset {
  width:25em;
}
label,input {
  float: left;
  margin: .6em;
}
label {
  clear: both;
  width: 9em;
  text-align: right;
  line-height: 1.8em;
}
label::after {
   content: '* :'
}

<form id="my-form">

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

  <fieldset name="in_fields">
    <legend>Personal informations</legend>

    <label> First Name</label>
    <input type="text" name="fname" required>

    <label>Last Name</label>
    <input type="text" name="lname" required>

    <label>Phone Number</label>
    <input type="text" name="number" required>

    <label>Email</label>
    <input type="email" name="email" required>  
  </fieldset>

  <p id="WiGo" >What's going on ?</p>

</form>