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

Question

I am trying to group my name/number/email field together so I can have one event listener. I want to make it so when the user leaves the input field, it plays the audio. I have tried adding an event to the parent .infofield class but it doesn't work for onblur/focus events. I was wondering how I'd approach this in 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

I do not see any difficulties, what is the problem?

 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>