Многоуровневые каскады LI ONCLICK event

Question

Я ищу способ создания многоуровневого дерева с событиями onclick в каждом узле.

У меня есть следующий код:

<div id="tree"> 
    <ul id="UL1" onclick="alert('LEVEL1');"> 
     <li id="LI1"> 
     LEVEL1 
     <ul id="UL2" onclick="alert('LEVEL2');"> 
      <li id="LI2"> 
       LEVEL2 
       <ul id="UL3" onclick="alert('LEVEL3');">    
        <li id="LI3"> 
        LEVEL3 
        <ul id="UL3" onclick="alert('LEVEL4');"> 
         <li id="LI4" >LEVEL4       
        </ul>     
       </ul> 
     </ul>  
    </ul> 
</div> 

цель состоит в том, что если пользователь нажмет на LEVEL4 (к примеру) он получает уведомление только LEVEL4. Проблема заключается в том, что предупреждение каскадом и при нажатии на какой-то определенный уровень я получаю все предупреждения наследования:

• нажав на LEVEL4 -> оповещения о LEVEL4, LEVEL3, LEVEL2 и LEVEL1
• нажав на LEVEL3 - -> оповещения о LEVEL3, LEVEL2 и LEVEL1
• и т.д. ...

Я ищу иметь предупреждение только для соответствующего уровня, что я нажал вместо унаследованного остальных верхних уровней ...

Есть ли простой способ достичь этого?

Спасибо!

Answer 1

Использование делегирования событий с ненавязчивым кодом вместо встроенного.

Прикрепите к вашему родительскому элементу и используйте event объект target, чтобы идентифицировать элемент, который вызвал событие.

Например:

// Your parent element 
 
var div = document.getElementById("tree"); 
 

 
// Attach the eventlistener to the parent element 
 
div.addEventListener('click', dosomething); 
 

 
// Use the target from the event object that is passed to the handler 
 
function dosomething(e) { 
 
\t console.log("You clicked " + e.target.id); 
 
}

<div id="tree"> 
 
    <ul id="UL1" > 
 
     <li id="LI1"> 
 
     LEVEL1 
 
     <ul id="UL2" > 
 
      <li id="LI2"> 
 
       LEVEL2 
 
       <ul id="UL3" >    
 
        <li id="LI3"> 
 
        LEVEL3 
 
        <ul id="UL3" > 
 
         <li id="LI4" >LEVEL4       
 
        </ul>     
 
       </ul> 
 
     </ul>  
 
    </ul> 
 
</div>