javascript - 在 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.querySelectorAll('input').forEach(inElm=>
  {
  inElm.onfocus=focusOn;
  inElm.onblur=focusOff;
  })
function focusOn(e)
  {
  WiGo.textContent = `evt focus on ${e.target.name}`  
  }
function focusOff(e)
  {
  WiGo.textContent = `evt blur on ${e.target.name}`  
  }  
  
/* previous version --------------------------------------------------
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'
  }
----------------------------------------------------------------------*/  

#my-form{
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
fieldset {
  width:22em;
  padding: 0 1em;
}
legend::before,
legend::after {
   content: '\00a0'
}
label,input {
  float: left;
  margin: .4em;
}
input {
  width:11em ;
  padding: .2em;
  border-width: 1px;
  padding: .3em 5px;
}
label {
  display: block;
  clear: both;
  width: 9em;
  text-align: right;
  line-height: 1.5em;
}
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>