0

I had a look at some topics here regarding e/event.target vs event.currentTarget and this has helped me immensely when it comes to understanding the difference but obviously I have a long way to go still.

<body onload="attachEventsListeners()">
<main>
    <h1>Time Converter</h1>
    <div>
        <label for="days">Days: </label>
        <input type="text" id="days">
        <input id="daysBtn" type="button" value="Convert">
    </div>
    <div>
        <label for="hours">Hours: </label>
        <input type="text" id="hours">
        <input id="hoursBtn" type="button" value="Convert">
    </div>
    <div>
        <label for="minutes">Minutes: </label>
        <input type="text" id="minutes">
        <input id="minutesBtn" type="button" value="Convert">
    </div>
    <div>
        <label for="seconds">Seconds: </label>
        <input type="text" id="seconds">
        <input id="secondsBtn" type="button" value="Convert">
    </div>
</main>

This is the body of a HTML document I am looking at. There is a task I have to do with it but I don't want anyone to write my code or anything of that sort. I just need some help with delegation when it comes to DOM elements.

I am trying to get access to each and every button within the divs of the skeleton. With my limited knowledge I have decided to do this:

let divElements = document.querySelectorAll('div');

This, as far as I know, will give me a NodeList which I can iterate. Ok fine. I then decide to add event listeners to every div element and try to console out the type of the target which triggers the event. As far as I know currentTarget is always what is directly attached to the eventListener and target is what the event is dispatched to(so to say).

divElements.forEach(d=>d.addEventListener('click', (e)=>{
    console.log(e.target.type);
}))

When I click on Days in the first div I get both text and undefined - two rows of text. When I click on everything else in the first div I get just one. Why is that? Is my way of selecting(going from the divs a good idea or no?). Any help or links to something which you think is a relevant read would be appreciated!

grizzled_carcass
  • 71
  • 7
  • 1
    You are facing a quite complicated edge case here. I'm afraid it will make things complicated to you. The crux of the issue is that ` – Kaiido Mar 18 '22 at 09:40
  • The main question is, why do you care for click events on those elements? These are kind of irrelevant. If you need this to keep track of focus, use `focusin` and `focusout`. – connexo Mar 18 '22 at 09:48

0 Answers0