How to detect a click on a list element?

Question

I have this html code:

<div id="wordListDiv">
    <ul>
        <li id="word_0">bateau</li>
        <li id="word_1">braguette</li>
        <li id="word_2">bateau</li>
    </ul>
</div>

Then I have a javascript file:

document.addEventListener( 'click', mouseEventsListener);

function mouseEventsListener ( event ) {

    switch( event.target ) {

        case ***HOW_TO_DETECT_CLICK_ON_THE_LI_ELEMENTS***:

            myFunction( parameter );

        break;

    default:
        
        break;

    }

}

How can I execute myFunction from within the switch/case statement when the user clicks on a "li" element?

Answer 1

Check this code and as mention in above comment you can add more check as per your need

 document.addEventListener( 'click', mouseEventsListener); function mouseEventsListener ( event ) { switch( event.target.tagName ) { case 'LI': alert('Clicked LI') //myFunction( parameter ); break; default: break; } }

 <div id="wordListDiv"> <ul> <li id="word_0">bateau</li> <li id="word_1">braguette</li> <li id="word_2">bateau</li> </ul> </div>

Answer 2

To track click on every element, you need to add event listener in a loop

 let list = document.querySelectorAll( '#wordListDiv ul li' ); for ( var i = 0; i < list.length; i++ ) { list[i].addEventListener( 'click', (e) => { console.log( e.target.id ); }) }

 <div id="wordListDiv"> <ul> <li id="word_0">bateau</li> <li id="word_1">braguette</li> <li id="word_2">bateau</li> </ul> </div>

Answer 3

If you absolutely need the case syntax, use this:

 [...document.getElementsByTagName("li")].forEach(function(el) { console.log(el) el.addEventListener('click', mouseEventsListener); }) function mouseEventsListener(evt) { var index = whichChild(event.target) switch (index) { case 0: myFunction("1"); break; case 1: myFunction("2"); break; case 2: myFunction("3"); break; default: break; } } function myFunction(parameter) { console.log(parameter) } function whichChild(elem) { var i = 0; while (elem.previousElementSibling;= undefined) { ++i. elem = elem;previousElementSibling; }; return i; }

 <div id="wordListDiv"> <ul> <li id="word_0">bateau</li> <li id="word_1">braguette</li> <li id="word_2">bateau</li> </ul> </div>

Otherwise, I would recommend looking at the other solutions.