다단계 LI 계단식 ONCLICK 이벤트

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> 

목적은 사용자가 레벨 4를 클릭하면 (예) 그는 단지 레벨 4에 대한 경고를 얻을 수 있다는 것입니다 :

나는 다음과 같은 코드가 있습니다. 문제는 경고가 캐스케이드와 나는 모든 상속 가상 에이전트 일부 특정 수준에서 클릭하면된다는 것이다 : 레벨 4에

• 클릭을 ->
• 클릭 LEVEL3에 레벨 4, LEVEL3, LEVEL2 및 LEVEL1에 대한 경고 - - LEVEL3, LEVEL2 및 LEVEL1
• 등을위한> 경고 ...

난 단지 내가 대신 상위 레벨의 나머지 부분을 상속의 클릭 해당 레벨에 경고를 찾고 있어요

...

달성하기 쉬운 방법이 있습니까?

감사합니다.

Answer 1

인라인 대신 눈에 거슬리는 코드로 이벤트 위임을 사용하십시오.

부모 요소에 eventlistener을 첨부하고 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>