Multilevel LI Kaskaden ONCLICK Ereignis

Question

Ich bin auf der Suche nach einer Möglichkeit, eine Multilevel-Struktur mit Onclick-Ereignissen in jedem Knoten zu erstellen.

Ich habe den folgenden Code:

<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> 

Der Zweck besteht darin, dass, wenn der Benutzer auf dem LEVEL4 (zum Beispiel) klickt er nur eine Warnung für LEVEL4 bekommt. Das Problem ist, dass die Warnung kaskadiert wird, und wenn eine bestimmte Ebene i die Vererbungs alle Benachrichtigungen zu erhalten, klicken auf:

• Klick auf LEVEL4 -> Benachrichtigungen über LEVEL4, LEVEL3, LEVEL2 und LEVEL1
• Klick auf LEVEL3 - -> Benachrichtigungen über LEVEL3, LEVEL2 und LEVEL1
• etc ...

ich suche die Warnung nur für die entsprechende Ebene, die ich angeklickt anstatt den Rest der oberen Ebenen vererben ...

Gibt es einen einfachen Weg, es zu erreichen?

Danke !!

Answer 1

Verwenden Sie Ereignisdelegierung mit unaufdringlichem Code anstelle von Inline.

Verbinden Sie die eventlistener mit Ihrem übergeordneten Element und verwenden Sie das Objekt target, um das Element zu identifizieren, das das Ereignis ausgelöst hat.

Zum Beispiel:

// 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>